로고 및 네비게이션 오버 배너 회전

Question

나는 회전 배너 위에있는 nav 및 logo div를 만들려고했습니다. CSS에 문제가 있습니다. 예를 들어

는 :

<div class="logo-div"> 

<div class="logo"> 
<img src="image/logo.jpg"> 
</div> 

<div class="nav"> 
<ul><li>nav-button</li></ul> 
</div> 

</div><!--logo div --> 

<div class="rotator"> 
</div> 

나는 항법 로고 DIV들로 회를 당겨 부정적인 위쪽 여백을 시도하지만 그건 단지 탐색 위로하지 로고를 가져왔다. 나는 또한 nav-logo와 rotator의 순서를 바꿔 보았지만 그 중 하나는 작동하지 않았다.

추측 Z- 인덱스 및 상대 위치와 절대 위치 지정을 사용해야하지만 정상적으로 작동하지 않습니다.

대단히 감사합니다. 여기

이 기능을 가진 사이트의 예 : website

Answer 1

좋아, 샘플 링크는 ... 핵심 질문은 당신이 회전하는 데 사용할려고하고있는 무슨 방법이 될 것입니다 원하는 것을 적절한 표시가있는 경우 배너? 자바 스크립트 물론 (만약 당신이 크로스 브라우저 호환성을 원한다)하지만 ... 어떤 방법? 링크에서 사람은 당신은 그가, <li> 몇 가지 '의 서로 다른 배경을 가지고 각각의 그것은 내부의 ...

transitions (고급 CSS3 효과)를 사용하여, absolute positioning 및 left와 <ul> 요소를 사용하고 제공 기본적으로 그들이 수평 어떤 경우 left

의 값을 변경 스크롤, 당신은 같은 필요할 것 :

.wrapper {display:block; position:relative;} 
.logo-div {position:absolute; top:0; left:0; z-index:9999;} 
.logo {} 
.nav {} 
.rotator {position:absolute; top:0; left:0; z-index:1;} 

을하고, HTML은해야 뭔가 같은 :

<div class="wrapper"> 

    <div class="rotator"> 
     insert your magic slides of different content or backgrounds here, be in in ul+li format or just divs or whichever method you prefer 
    </div><!-- .rotator --> 

    <div class="logo-div"> 

    <div class="logo"> 
     <img src="image/logo.jpg"> 
    </div> 

    <div class="nav"> 
    <ul> 
     <li>nav-button</li> 
    </ul> 
    </div><!-- .nav --> 

    </div><!--logo div --> 

</div><!-- .wrapper --> 

실제 질문은 콘텐츠를 순환시키는 데 어떤 방법을 사용하겠습니까? 그의 방법을 복사하거나 변경하려는 모든 것이 배경이지만 배경이 아닌 경우 배경 위치를 변경하는 것만 가능합니다.

. 래퍼 또는 상위 요소에는 position이 있어야합니다. 해당 래퍼의 내용 (이 경우 .logo-div 및 .rotator)은 위치가 필요합니다. relative navbar 및 로고 뒤에 오는 .rotator div와 z-index : 1; 플러스 상단 : 0; 및 왼쪽 : 0; 예를 들어 .rotator div보다 상위 인 .logo-div에는 z- 색인 : 2 또는 9999가 필요합니다. 플러스 상단 : 0; 및 왼쪽 : 0; 예를 들어

이제는 모든 것이 유지되어야하며 .rotator의 내용은 페이지의 나머지 부분을 엉망으로 만들지 않고 이동할 수 있습니다.

배경 콘텐츠/이미지를 순환/이동하는 방법을 선택하면보다 구체적인 답변을 제공 할 것입니다.

희망이 도움이되었습니다.