왜 body 태그의 스타일을 "position : relative"로 지정하면 절대 위치 div 시작이 낮습니까?

div (페이지 상단에 있음)에 margin-top: 10px이있는 경우 절대적으로 위치가 지정된 div (더 높은 z- 인덱스에 있고 해당 div 바깥에있는 및 div의 부모 바깥에)는 top: 0px이 아니라 10px에! 왜 이런 일이왜 body 태그의 스타일을 "position : relative"로 지정하면 절대 위치 div 시작이 낮습니까?

http://jsfiddle.net/afv3gze7/

입니까? 본문에있는 position: relative을 제거하기 만하면 모든 것이 수정되지만 (코드에서 다른 것들과 문제가 발생합니다. 상대적으로 몸체를 배치해야합니다).

http://jsfiddle.net/afv3gze7/1/

문제 코드는 :

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      html 
      { 
       position: relative; 
       min-width: 100%; 
       height: 100%; 
       min-height:100%; 
      } 

      body 
      { 
       min-width: 100%; 
       min-height:100%; 
       font-size: 100%; 
      } 
      .outer 
      { 
       position: relative; 
       top: 0em; 
       left: 0em; 
       width: 100%; 
       height: 100%; 
       background-color: #ffffff; 
      } 

      .overlay 
      { 
       position: absolute; 
       top: 0px; 
       left: 0em; 
       width: 100%; 
       height: 100%; 
       background-color: #000000; 
       -moz-opacity: 0.50; 
       -khtml-opacity: 0.50; 
       -webkit-opacity: 0.50; 
       opacity: 0.50; 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50); 
       filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
       filter:alpha(opacity=50); 
       z-index: 6; 
       display: none; 
      } 

      .inner 
      { 
       position: relative; 
       width: 100%; 
       border: none; 
       margin: 0em; 
       padding: 0em; 
       margin-top: 3.875em; 
       overflow: hidden; 
       z-index: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="outer"> 
      <div class="inner">s</div> 
     </div> 
     <div class="overlay" style="display: block;"></div> 
    </body> 
</html>

출처

2014-09-05 Don Rhummy

절대적으로 위치한 요소는 가장 가까운 위치에있는 조상에 대해 배치되기 때문에. – j08691

그러나 @ j08691 가장 가까운 위치에있는 조상은 본문입니다. –

[Top : 0 \'이 본문에 상대적인 절대 위치에있는 요소에서 작동하지 않는 이유는 무엇입니까?] (http://stackoverflow.com/questions/33594788/why-doesnt-top-0-work-on - 신체에 관련된 절대적으로 위치 된 요소) –

이 CSS에서 position: relative가하는 일입니다. 일반적으로 렌더링 할 위치에서 요소를 이동하고 일반적으로 거기에서 차지하는 공간을 남겨 둡니다. 여기에 more about relative positioning입니다. 당신은 body 요소에 position: relative을 유지해야하는 경우

는 padding-top에 .inner 클래스에 margin-top 속성을 변경 :

.inner 
{ 
    position: relative; 
    width: 100%; 
    border: none; 
    margin: 0em; 
    padding: 0em; 
    /*margin-top: 3.875em;*/ 
    padding-top: 3.875em; 
    overflow: hidden; 
    z-index: 0; 
}

출처

2014-09-05 19:30:31

'top'과'left'에 주어진 값은'0em'이고'bottom'과'right'는 전혀 설정되지 않았습니다. 상대적으로 배치 된 요소는 전혀 이동하지 않습니다. – Quentin

'padding-top'으로 변경하면 문제가 해결되었습니다! 감사. –

그러나 문제 요소 인 오버레이는 상대적으로 위치하지 않습니다. 몸의 마진이 내부의 위쪽 여백을 "역으로 상속"하는 것처럼 보입니다. 이것은 틀린 것처럼 보인다. 문제를 해결하는 또 다른 방법은 외부에 보이지 않는 콘텐츠를 추가하는 것입니다. 이렇게하면 CSS 엔진이 혼란에서 벗어나서 올바르게 작동합니다. –

이 position: relative 설정 (또는 static 아닌 다른 위치 값)를 새로 설정 포지셔닝 컨텍스트

절대적으로 위치한 자손은 상대적으로 배치 된 요소의 가장자리를 기준으로 배치됩니다.

본문 요소는 기본적으로 0이 아닌 여백 및/또는 패딩을 가지므로 .outer의 위쪽이 더 낮기 때문에 내부에 절대적으로 배치 된 요소도 포함됩니다.

출처

2014-09-05 19:32:50 Quentin

예, 여백 및 패딩이 0 일 때 문제가 계속 발생합니다. 어떤 아이디어? http://stackoverflow.com/q/33594788/3597276 –

그러나 문제 요소 (오버레이)는 상대적으로 배치되지 않고 절대적으로 배치됩니다. 그리고 위치 지정 컨텍스트는 시체입니다. 본문에 여백과 패딩을 0으로 설정하면 문제가 지속됩니다. overlay 요소는 body의 내용 상자를 기준으로 위쪽 : 0 및 왼쪽 : 0에 있어야하며 그렇지 않습니다. 당신은 예를 들어, 외부에 콘텐츠를 추가하는 경우

...

.outer:before{ 
    content: 'outer'; 
    visibility: hidden; 
}

는 그 다음 문제를 해결합니다. 당신은 예를 들어, 외부에 테두리를 추가 할 경우에도 답변의

border: 1px solid transparent;

Fiddle

없음 몸에 asolutely 위치 요소 상대에 대한이 동작을 설명하기 위해 보이지 않는다 ... 고정됩니다.

편집 : 문제가 아니라 ... 1 x 1 픽셀로 신체의 패딩을 설정하여 축소

body{ 
    padding-top: 1px; 
}

또는 신체에 대한 경계를 설정하여

...

body{ 
    border: 1px solid transparent; 
}

출처

2014-09-06 05:50:48

왜 body 태그의 스타일을 "position : relative"로 지정하면 절대 위치 div 시작이 낮습니까?

답변

관련 문제