2009-06-17 5 views
1

이것은 내가 레이아웃을 고칠 때 항상 가지고있는 한 가지 문제입니다. 나는 절대적으로 자리 잡은 DIV를 얻었고, 나는 그 안에 또한 절대적으로 자리 잡을 필요가있는 child-DIV를 배치했다. 하지만이 아이 - DIV가 부모에게 상대적으로 행동하기를 정말로 원합니다 ... 가능합니까? 아니면 랩 -DIV를 만들어야합니까?절대적으로 DIV는 부모 DIV (절대적으로 배치 된)에 상대적으로 배치됩니까?

<div class="container" style="position:relative;"> 
    <div class="parent" style="position:absolute;"> 

     <!-- this child div will behave relative to .container --> 
     <div class="child" style="position:absolute;"></div> 
    </div> 
</div> 

이 차라리 피하려는 '포장'솔루션입니다 :

<div class="container" style="position:relative;"> 
    <div class="parent" style="position:absolute;"> 
     <div class="wrapper" style="position:relative;"> 

      <!-- this child div will behave relative to .wrapper--> 
      <div class="child" style="position:absolute;"></div> 
     </div> 
    </div> 
</div> 

답변

1

절대 위치 요소는 위치가 지정되지 않은 가장 가까운 조상의 가장자리에 대해 배치됩니다 (즉, 위치는 정적이 아닙니다).

부모 요소 위치 : 절대이므로 자식은 가장자리를 기준으로 배치됩니다.

그래서 이미 갖고있는 행동을 취하는 방법을 묻는 것처럼 보입니다. 첫 번째 예제의 주석이 올바르지 않은 것으로 보입니다.

0

당신은 당신이 정말로 여러 중첩 된 절대 위치 요소를 사용해야 할 경우 자신에게 물어 할 수 있습니다.

그렇지 않으면 래퍼 솔루션을 사용하는 것이 가장 좋습니다.

1

이미 한 div를 절대적으로 배치 한 경우 자녀를 위해 두 개의 오프셋을 함께 추가 할 수 없습니까? 예 : #one는 #one하는 10, 10 상대,

#one { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

#two { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
} 

에서 10, 10 및 #two에있을 아니면 오른쪽 하단에 왼쪽 상단 모서리와 #two에 #one 잠금 같은 애호가 뭔가 때문이다 #one의 경우 기본 수학이 그런 식으로 작동하지 않는 경우? 이 경우 별도의 div가 필요할 수 있습니다.

아니면 그냥 피곤하고 뭔가 빠져 있습니까?

관련 문제