div 변경 위치 - 다른 div 뒤에있는 div

나는이 탐색 div가 고정되어 있으며 10 % 투명합니다.이 div는 웹 페이지 상단에 있습니다. 나는 div가 첫 번째 div의 맨 아래에 있도록 다른 div를 만듭니다. 코드를 실행하면 두 번째 div가 웹 페이지 상단에서 시작되고 투명 div로 인해 두 번째 div가 표시됩니다.div 변경 위치 - 다른 div 뒤에있는 div

두 번째 div 최상위 위치를 px로 설정하는 옵션이 있다는 것을 알고 있지만 다른 방법을 사용하면 더 쉽게 할 수 있기를 바랍니다 (특히 두 번째 div 다음에 다른 div를 추가 할 계획이기 때문에).

<body> 
<div id="header"> 
    <div id="nav_bar"> 
     <ul> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
      <li><a href="#">5</a></li> 
     </ul> 
    </div> 
</div> 

<div id="main_pics"> 
<!-- photos here --> 

</div>

내 CSS 코드입니다 :

#nav_bar{ 
border: 2px solid black; 
background: rgba(255,255,255,0.98); 
height: 55px; 
position: fixed; 
width: 100%; 
top: 0; 
left: -2px; 
} 
#main_pics{ 
width: 80%; 
background-color: gray; 
height: 500px; 
margin: auto; 
}

출처

2015-01-09 APRULE

position:fixed ; top:0;#nav-bar에 CSS 속성

와 #을 display:block ; margin-top:60px // (or the size you need ...)를 추가 내 HTML 코드

요 토론을보고 u와 maioman은 정말로 당신이 단순한 방법으로 무엇을 의미하는지 이해할 수 없었습니다.

(제안 maioman 것과 같은) 첫 번째 방법 : http://jsfiddle.net/u6eydqw8/ 후속 DIV 더 이상 어떤 *-top를 넣어 필요가 없습니다 main_pics 후 addedd ..

두 번째 방법은 동일한이있는 눈에 보이지 않는 컨테이너를 추가 높이 (테두리 너비 포함)를 DOM에 적용하면 *-top을 조정할 필요가 없습니다. 이 부분을 볼 수 있습니다 http://jsfiddle.net/u6eydqw8/1/

이게 당신이 찾고있는 것이면 의견이 있으십니까?

출처

2015-01-09 10:04:03 ChinKang

tnx !!!! 나는 당신의 첫 번째 예를 의미했습니다. – APRULE

메인 사진

출처

2015-01-09 09:13:29 maioman

내가 말했듯이, 위치가 고정되어 있습니다. – APRULE

중요한 부분은 다음 div에 여백을 설정하는 것입니다. – maioman

간단한 대답은 여백을 추가하는 것이지만 나는 간단한 방법, 주로 div를 더 추가하기를 원하기 때문에 내가 추가하는 모든 div와 함께 top을 계산하고 싶지 않기 때문입니다. 그냥 물어보십시오 ... – APRULE

div 변경 위치 - 다른 div 뒤에있는 div

답변

관련 문제