고정 내비게이션 막대

고정하고 중심에 놓고 싶은 탐색 바가 있습니다. 현재 막대가 가운데에 배치되어 있지만 '위치 고정 :'을 추가하면 내비게이션 막대가 화면 왼쪽으로 이동했습니다. 내 탐색 바는 현재 화면 상단에서 약 20 % (가운데)입니다.고정 내비게이션 막대

CSS :

div.social-wrap{ 
width: 500px; 
margin: 0 auto 0 auto; 
padding-top: 25px; 
}

HTML : 여기

<div class="social-wrap"> 
     <ul> 
      <li><a href="index.html" class="link_home shadow extend">Home</a> 
      </li> 
      <li><a href="about.html" class="link_identity shadow extend">Identity</a> 
      </li> 
      <li><a href="books.html" class="link_books shadow extend">Books</a> 
      </li> 
      <li><a href="contact.html" class="link_contact shadow extend">Contact</a> 
      </li> 
      <li><a href="https://twitter.com/Christdentity" class="link_twitter shadow extend" target="_blank">Twitter</a> 
      </li> 
     </ul> 
</div>

가 jsfiddle입니다 :

http://jsfiddle.net/Sederu/uPZuu/

출처

2013-04-16 Seth Urquhart

당신이 고정 킵 무엇을 의미합니까? 고정 너비? – fotanus

죄송합니다, 위치입니다. 따라서 스크롤 할 때 위로 움직이지 않고 그대로 유지됩니다. –

귀하의 고정 위치를 사용하는 경우 <div> 기본적 its taken out of the document flow으로하기 때문에, 이동하고있다 상대적으로 가장 가까운 위치에있는 조상 (정적이 아닌). 네비게이션 바에 다른 조상을 배치하지 않은 경우 루트 <html> 요소 일 가능성이있다. 뷰포트의 왼쪽 상단으로 이동하면 의미가 있습니다.

기본적으로 왼쪽 속성을 중앙에 50 %로 설정하고 div의 너비의 음수 반으로 왼쪽 여백을 설정하여 가운데를 div의 가운데로 이동해야합니다.

예 :

div.social-wrap{ 
width: 500px; 
position: fixed; 
left: 50%; 
margin-left: -250px; 
padding-top: 25px; 
}

출처

2013-04-16 16:05:04 Adrift

고정되었지만 탐색 막대를 화면 하단까지 움직여 왼쪽 모서리에 밀어 넣었습니다. –

나는 .. .. [jsFiddle] (http://jsfiddle.net)을 제공해주세요. 당신을 더 잘 도울 수 있습니다. – Adrift

나는 그것이 위 또는 오른쪽에있다 : http://jsfiddle.net/Sederu/uPZuu/ –

고정 내비게이션 막대

답변

관련 문제