: 상대 *없이 * 구조

Question

에게 간단한 예 변화 :

HTML :

<div id="A"> 
    <div id="B"></div> 
    <div id="C"></div> 
    <div id="D"></div> 
</div> 

CSS : http://jsfiddle.net/h6BNz/

OK : 바이올린로서

#A,#B,#C,#D{width:100px;height:100px} 
#A{position:relative;width:220px;top:20px;left:20px;background:#FF0000} 
#B{position:absolute;top:0;left:0;background:#FFFF00} 
#C{position:absolute;top:10px;left:80px;background:#00FF00} 
#D{position:absolute;background:#00FFFF;top:0;right:0} 

따라서 C은 B 앞에 있고뒤에 있습니다.이고, 위치는 A입니다. 문서에 상대적으로 배치하고 싶지만 B와 D 사이에 두십시오 (z- 색인 및 탭 순서 모두에서). C의 위치가 position:fixed으로 변경되면 페이지를 스크롤하지 않고 (분명히) 제외하고 원하는 것을 정확하게 수행합니다.

나는 그것을 달성하기 위해 부모로부터 div를 깨는 것을 포함하는 많은 솔루션을 보았습니다. 그러나 그것은 관리해야 할 악몽처럼 보이는 z- 인덱스와 탭 순서를 설정해야합니다 (이것은 플러그인이므로 주변 코드가 내 컨트롤 밖에 있습니다.)

B 또는 D을 깨지 않고 구조를 변경하지 않고도 C을 어떻게 절대 위치에 놓을 수 있습니까? JavaScript를 설정하는 데는 문제가 없지만 완벽하게 반올림되도록 최종 페이지 위치가 필요합니다 (이유에 대한 자세한 내용은 내 다른 질문을 참조하십시오). 따라서 absolutePosition - absolutePositionOfContainer 메서드를 사용할 수 있다고 생각하지 않습니다.

Answer 1

#A이 position: relative 인 경우 그 안의 내용은 #A에 상대적으로 배치됩니다.

so #B#C 및 #D은 모두 #A입니다. 위치가있는 무언가 안에있는 경우 문서를 기준으로 배치 할 수 없습니다.

음수 여백을 사용하여 #A 외부에 위치 할 수 있지만 #A은 overflow: visible입니다.