CSS 위치 절대 더 위치

내가 안으로 몇 <h1>, <h2> 및 <p> 태그와 <div>을 가진 요소를 무시하지, 나는이 부모 <div>의 내부에 이러한 H1, H2 및 P 태그 아래 <div> 있습니다. 부모의 position: relative;은 <div>이고, 어린이는 <div> 인 position:absolute; top:0px;입니다. h1, h2 및 p 태그에 대해 CSS에 위치 설정이 없습니다. 내가 얻는 결과는 자식 <div>이 다른 자식 요소의 맨 아래에 위치하며 부모 div의 맨 위에 위치하지 않는다는 것입니다. 무슨 일이 일어나야할까요?CSS 위치 절대 더 위치

** HTML **

<div id="parentDiv"> 
    <h1>Header</h1> 
    <h2>sub header</h2> 
    <p>paragraph text</p> 
    <div id="displayAtTop">test</div> 
</div>

** CSS **

#parentDiv { 
    position: relative; 
    width: 500px; 
    min-height: 300px; 
} 

#parentDiv h1, #parentDiv h2, #parentDiv p { 
    margin-left: 30px; 
    margin-top: 30px; 
} 

#displayAtTop { 
    position: absolute; 
    top: 0px; 
    left: 350px; 
}

나는 절대 위치가 모든 것을 무시하고 가장 가까운 부모 요소의 가장 상단에 배치 줄 알았는데 포지셔닝 세트.

출처

2014-09-25 iRebel_85

그냥 복사하고 JSFiddle에 코드를 붙여이 예상대로 작동하는 것 같군 : http://jsfiddle.net/galengidman/wbL8mwsg/ –

때문에 절대 위치 설정 부모 div에 상대적으로 형제 엘리먼트 위치에 영향을 미치지 않습니다 ... –

은 저에게 잘 작동합니다 : http://jsfiddle.net/85k8gLo7/ –

코드가 예상대로 작동합니다.

더 쉽게 볼 수 있도록 빨간색 테두리가 추가되었습니다.

< 본문> 또는 < html> 여백/여백을 잘못 입력했다고 생각합니다.

<head> 
    <style type="text/css"> 

     #parentDiv { 
      position: relative; 
      width: 500px; 
      min-height: 300px; 
      border: 1px solid red; 
     } 

     #parentDiv h1, #parentDiv h2, #parentDiv p { 
      margin-left: 30px; 
      margin-top: 30px; 
     } 

     #displayAtTop { 
      position: absolute; 
      top: 0px; 
      left: 350px; 
     } 

    </style> 
    </head> 

    <body> 

    <div id="parentDiv"> 
     <h1>Header</h1> 
     <h2>sub header</h2> 
     <p>paragraph text</p> 
     <div id="displayAtTop">test</div> 
    </div> 

    </body> 
</html>

http://jsfiddle.net/StoneCypher/Lq95hcqe/

출처

2014-09-25 05:55:20

CSS 위치 절대 더 위치

답변

관련 문제