CSS_Experience 교환의 위치 포지셔닝 및 Z-색인 속성에 대해 깊이 이해하는 것이 좋습니다.

작성자: Cutsin
원본 주소: http://www.moonless.net/blog/2007/09/csspositionz-index.html

참고: 이 기사는 커뮤니케이션 목적으로만 사용됩니다. 부적절함 환영합니다 비판하고 정정합니다만 이유를 밝혀주세요 감사합니다!

평소에 사용하지 않아서 예전에 CSS를 작성할 때 위치 속성의 절대값과 상대값에 대해 막연하게 이해하고 있었고, z-index의 캐스케이딩. 이해의 요소 외에도 브라우저 간에 서로 다른 구문 분석 결과도 큰 문제입니다. 오늘 CSS 문서를 주의 깊게 읽었으며 마침내 상자 모델의 부동 및 위치 지정에 대해 더 깊이 이해하게 되었습니다.

실제로 이러한 문제가 발생할 가능성이 매우 높습니다.
1. 가로 탐색을 만든 다음 마우스가 그 위로 지나간 후 ​​드롭다운 메뉴가 나타나면 이 드롭다운 메뉴의 위치를 ​​제어합니다. 아래 메뉴가 핵심입니다.
2. 페이지에 떠 있는 여러 버블 프롬프트를 일반 페이지 레이아웃에 배치하고 싶지만, 그렇게도 합니다. 버블 프롬프트가 다른 브라우저의 모든 곳에 무작위로 배치되는 것을 원하지 않습니다.
3. 일반 텍스트에 작은 아이콘을 삽입할 때 일반적으로 태그를 사용하는데, html 속성인 absmiddle을 사용하든, CSS 속성을 사용하든 상관없이 수직 정렬 문제가 혼란스럽습니다. 수직 정렬을 사용하거나 상위 개체의 높이 + 줄 높이를 사용하면 다른 브라우저에서 항상 다르게 보입니다.

그럼, 혹시 위와 같은 문제를 겪으신 적 있으신가요? 아직 좋은 해결책이 없다면 이 글을 계속 읽어보시면 도움이 될 것입니다. :)
먼저 위치 속성의 여러 값 정의를 살펴보겠습니다.
위치 : 정적, 절대, 상대

정적 : 기본값입니다. position 속성이 지정되지 않으면 position 속성을 지원하는 HTML 객체는 기본적으로 static으로 이해됩니다. HTML 페이지를 문서 스트림으로 취급하고 소스 코드에서 각 태그의 순차적 위치가 프레젠테이션입니다. 해당 객체의 순서. static 값을 가진 모든 객체는 사용자가 작성한 html 태그 순서대로 렌더링됩니다.
아래 그림과 같이 float:left;가 지정된 일반적인 가로 탐색입니다.


relative: 상대 위치 지정. 이 속성 값은 문서 흐름에서 객체의 위치를 ​​유지합니다. 즉, 정적과 동일한 렌더링 방법을 가지며, 또한 점유합니다. 문서 흐름에서 개체의 고정 위치는 정적 속성 값과 달리 후속 개체에 의해 점유되거나 덮이지 않으며, 상대 설정이 있는 개체는 위쪽, 왼쪽, 오른쪽 및 아래쪽을 통해 자체의 새 표시 위치를 설정할 수 있습니다. 이 네 가지 특성 값은 문서 흐름의 이전 개체를 기준으로 하며 문서 흐름의 다른 개체에 영향을 주지 않고 새 위치로 오프셋되도록 자유롭게 설정할 수 있습니다. 방법:


절대: 절대 포지셔닝. 상대 속성과 달리 이 속성 값은 현재 개체를 문서 흐름 밖으로 끌어내고 후속 개체는 원래 위치를 차지합니다. 즉, 현재 개체는 독립적으로 표시되지만 위치는 위쪽, 왼쪽, 왼쪽으로 지정됩니다. right 및 하단 속성은 이전에도 그대로 상속되었습니다. 이때 4가지 속성의 값은 브라우저를 기준으로 하며 문서 흐름과 관련이 없습니다. 4개의 위치 속성을 지정하지 않고 예제의 B 영역을 절대값으로 설정하고, 여백을 설정하여 상대 위치를 변경하면 이 방법을 사용하면 위에서 언급한 문제 2를 해결할 수 있습니다.


다음 메시지 표시: Su Yu's CSS2.0 매뉴얼에는 상대 위치 스크롤 막대와 절대 위치 스크롤 막대의 차이가 절대적이지 않다고 언급되어 있습니다. 적어도 Firefox, Opera 및 Safari에서는 스크롤 막대가

프롬프트 b 나타납니다. : 속성 값이 절대 객체인 z-index 속성은 계단식 표시 순서를 설정할 수 있으며 이는
속성 값이 상대 객체인 z-index 속성을 설정할 때 주의해야 합니다. 현재 개체의 z-index를 -1로 설정하면 작동하지 않으며 Firefox에 표시되지 않습니다(참고로 이는 브라우저가 잘못되었다는 의미는 아니지만 상위 개체가 루트 요소인 경우). body인 경우 z-index는 유효하지 않으며 모든 z-index 설정은 루트 요소 뒤에 표시되지 않습니다. IE의 구문 분석 버그(#19 팁 덕분에) 외에도 0 이상으로 설정해야 합니다. 다른 개체가 이를 차단하도록 하려면 다른 개체의 위치를 ​​상대 및 z로 설정하면 됩니다.

위 표현이 그다지 좋지 않을 수도 있다는 것을 모르겠습니다.

문제 3의 경우 설계 요구 사항에 따라 상대 위치 또는 절대 위치를 설정할 수 있습니다.
문제 1에 대한 해결책은 많습니다. 저는 개인적으로 semantic dl, dt, dd를 사용하여 이를 달성하는 것을 권장하며, 이 방법의 성능은 기본적으로 다른 브라우저에서 동일합니다(IE, Firefox, Opera, 및 Safari) 상단 속성에는 몇 픽셀 차이만 있습니다. 참고로 코드는

몸 { 색상:#fff; 글꼴 크기:12px; } 울리 { 부동:왼쪽; 높이:30px; 배경색:#99CC99; 여백:0 10px; 패딩:0; 테두리:1px 솔리드 #c30; 너비:100px; } 울리디브{ 테두리:1px 솔리드 #f00; 배경색:#996666; 너비:100px; 높이:100px; 위치:절대; 여백 상단:15px; 여백-왼쪽:-1px; *왼쪽 여백:-79px; } 울리들, ul li dl dt, ul li dl dd { 여백:0; 패딩:0; } ul li dl dd { 테두리:1px 솔리드 #f00; 배경색:#996666; 너비:100px; 높이:100px; 위치:절대; 여백 상단:11px; *여백 상단:10px; 여백-왼쪽:-1px; } <ul> <li> 제목 - #텍스트 <div> 드롭다운 메뉴 - div </div> </li> <li style="position:relative;">목록b</li> <li>목록 C</li> <li> <dl> <dt>제목 - dt</dt> <dd>드롭다운 메뉴 - dd</dd> </dl> </li> </ul>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

예를 추가하세요. IE 브라우저와 IE가 아닌 브라우저에서 비교 보기:

<style> .main { width:500px; height:500px; background-color:#9cf; } .layer_a, .layer_b, .layer_c, .layer_d { position:absolute; width:100px; height:60px; } .layer_a { background-color:#69c; } .layer_b { background-color:#369; } .layer_c { background-color:#eee; } .layer_d { background-color:#696; } .brd { border:1px solid #c30; margin:1em; } .block { display:block; } </style> <div class="main"> <div class="brd">글 한 장, 글 한 장, 글 한 장, 글 한 장, 글 한 장, 글 한 장<div class="layer_a"></div> </div> <div class="brd">또 다른 텍스트 또 다른 텍스트 또 다른 텍스트<div class="layer_b"></div> </div> <p class="brd">다른 텍스트의 세 번째 단락다른 텍스트의 세 번째 단락</p> <div class="layer_c"></div> <p class="brd block">네 번째 단락은 블록의 텍스트를 지정합니다</p> <div class="layer_d"></div> <a href="" class="brd">네 번째 단락은 블록의 텍스트를 지정합니다<div class="layer_c"></div></a> <map class="brd block">네 번째 단락은 블록의 텍스트를 지정합니다<div class="layer_d"></div></map> <dd class="brd">네 번째 단락은 블록의 텍스트를 지정합니다<div class="layer_a"></div> </dd> <li class="brd">네 번째 단락은 블록의 텍스트를 지정합니다<div class="layer_b"></div> </li> </div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

이 예에서 볼 수 있듯이 IE가 블록 요소를 절대적으로 배치할 때 상위 요소가 블록 수준 요소인 경우 문서 흐름 밖으로 드래그한 후에도 원래 위치의 좌표를 상속합니다. IE 브라우저의 접근 방식은 다음과 같습니다. 드래그 아웃 문서 흐름이 끝나면 상위 요소의 좌표를 직접 찾습니다.