z-index가 고정 위치 지정과 함께 작동하지 않음
나는 있습니다div즉, 위치지즉정기본즉(정,지▁default▁with치▁position위i,position:static및 a ) 및adivfixed위치.
요소의 z 인덱스를 설정하면 고정 요소가 정적 요소 뒤로 가도록 하는 것은 불가능할 것 같습니다.
#over {
width: 600px;
z-index: 10;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under"></div>또는 여기 jsfiddle: http://jsfiddle.net/mhFxf/
를 사용하여 이 문제를 해결할 수 있습니다.position:absolute왜 이런 일이 일어나는지 누가 말해줄 수 있나요?
(이와 유사한 질문이 있는 것 같습니다. (고정 위치 지정으로 z-index 깨짐) 하지만 만족스러운 답변을 얻지 못했기 때문에 예제 코드를 사용하여 이 질문을 드립니다.
더하다position: relative#over처럼: " 스펫에표것처럼된시":
#over {
width: 600px;
z-index: 10;
position: relative;
}
#under {
position: fixed;
top: 14px;
width: 415px;
left: 53px;
border: 1px solid;
height: 10%;
background: #f0f;
z-index: 1;
}<div id="over">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</>
</div>
<div id="under"></div>이 질문은 여러 가지 방법으로 해결할 수 있지만, 실제로 스택 규칙을 알면 자신에게 맞는 최적의 답을 찾을 수 있습니다.
솔루션
그<html>을 알 수 .
- 컨텍스트의 요소(스태킹컨즉루요트소의트,
<html>이의 요소)는 다음과 같습니다.- 음의 z 인덱스 값을 가진 배치된 요소(및 하위 요소)(높은 값은 낮은 값 앞에 쌓이고, 같은 값을 가진 요소는 HTML의 모양에 따라 쌓임)
- 위치가 지정되지 않은 요소(HTML에서 모양순으로 정렬됨)
- z-index 값이 auto(HTML에서 모양순으로 정렬됨)인 배치된 요소(및 해당 요소의 자식)
- 양의 z-index 값을 가진 배치된 요소(및 해당 요소)(높은 값은 낮은 값 앞에 쌓이고, 동일한 값을 가진 요소는 HTML의 모양에 따라 쌓임)
할 수 있습니다.
- 를 -1에 합니다.
#under는 비 Positioned -vez-index 됩니다.#over - 의위를의 위치를 .
#overrelative규칙 됩니다 칙가 5그 적되도용록에것규록.
진짜 문제
개발자는 요소의 쌓기 순서를 변경하기 전에 다음 사항을 알고 있어야 합니다.
- 스택 컨텍스트가 형성되는 경우
- 적으로기본,,
<html>이며 첫 번째 스택 입니다.
- 적으로기본,,
- 스태킹 컨텍스트 내의 스태킹
아래의 쌓기 순서 및 쌓기 컨텍스트 규칙은 이 링크에서 가져온 것입니다.
스택 컨텍스트가 형성되는 경우
- 일 때 (요소가문요경인우소루트의서경(▁of우▁an▁whenthe▁is▁(인▁the▁element소▁root▁document요▁element▁a
<html>요소) - 요소의 위치 값이 정적이 아닌 경우 및 z-index 값이 자동이 아닌 경우
- 요소의 불투명도 값이 1보다 작은 경우
- 몇 가지 새로운 CSS 속성도 스택 컨텍스트를 생성합니다.여기에는 변환, 필터, CSS 영역, 페이징된 미디어 및 기타가 포함됩니다.https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- 일반적으로, CSS 속성이 오프스크린 컨텍스트에서 렌더링을 요구하는 경우, 새로운 스택 컨텍스트를 만들어야 합니다.
스태킹 컨텍스트 내의 스태킹 순서
요소의 순서:
- 컨텍스트의 요소(스태킹컨즉루요트소의트,
<html>기본적으로 요소는 유일한 스태킹 컨텍스트이지만 모든 요소는 스태킹 컨텍스트의 루트 요소가 될 수 있습니다(위 규칙 참조).- 루트 스태킹 컨텍스트 요소 뒤에 하위 요소를 배치할 수 없습니다.
- 음의 z 인덱스 값을 가진 배치된 요소(및 하위 요소)(높은 값은 낮은 값 앞에 쌓이고, 같은 값을 가진 요소는 HTML의 모양에 따라 쌓임)
- 위치가 지정되지 않은 요소(HTML에서 모양순으로 정렬됨)
- z-index 값이 auto(HTML에서 모양순으로 정렬됨)인 배치된 요소(및 해당 요소의 자식)
- 양의 z-index 값을 가진 배치된 요소(및 해당 요소)(높은 값은 낮은 값 앞에 쌓이고, 동일한 값을 가진 요소는 HTML의 모양에 따라 쌓임)
의 의이후로 때부터.overdiv는 포지셔닝을 가지고 있지 않으며, z-index는 포지셔닝을 어디에 어떻게(그리고 무엇과 관련하여) 포지셔닝해야 하는지 알지 못합니다.당신의 오버 디브의 위치를 상대적인 것으로 바꾸기만 하면, 그 디브에 부작용이 없고 그러면 언더 디브는 당신의 의지에 복종할 것입니다.
이 답변은 잘못된 정보를 제공합니다.대신 @Dansingerman의 코멘트와 예시를 검토해주시기 바랍니다.
z-index는 특정 컨텍스트 내에서만 작동합니다.relative,fixed또는absolute위치.
상대 div에 대한 z-index는 다음과 아무런 관련이 없습니다.z-index절대적이거나 고정된 디브의.
기브 더#under부정적인 사람z-index,예.-1
이는 다음과 같은 이유로 발생합니다.z-index속성이 무시됨position: static;그것이 기본값입니다; 그래서 당신이 작성한 CSS 코드에서,z-index이라1두 요소 모두에 대해 아무리 높게 설정해도#over.
줌으로써#under음의 값, 그것은 어떤 것이든 뒤에 있을 것입니다.z-index: 1;요소, 즉.#over.
내비게이션 메뉴를 만들고 있었습니다.있습니다overflow: hidden모든 것을 숨긴 내 내비게이션의 CSS에.저는 그것이 z-index 문제라고 생각했지만, 정말로 저는 제 내비게이션 밖에 모든 것을 숨기고 있었습니다.
요소가 정상적인 흐름 밖에 배치되면 다른 요소와 겹칠 수 있습니다.
http://web.archive.org/web/20130501103219/http 의 오버랩 요소 섹션에 따르면://w3schools.com/css/css_positioning.asp
CSS 사양에 정의된 고정 요소(및 절대 요소)의 동작:
문서에서 분리되어 가장 가까운 고정/절대 위치 부모에 배치된 것처럼 동작합니다.(한 단어 한 단어 인용이 아님)
이것은 zindex 계산을 조금 복잡하게 만듭니다. 저는 본체 요소에 컨테이너를 동적으로 생성하고 이러한 모든 요소(해당 본체 수준 요소 내에서 "my-fixed-one"으로 분류됨)를 이동하여 문제(동일한 상황)를 해결했습니다.
언급URL : https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning
'programing' 카테고리의 다른 글
| 도커 파일에서 WORKDIR의 요점은 무엇입니까? (0) | 2023.07.30 |
|---|---|
| 첫 번째 Heroku 배포 실패 '오류 코드 =H10'' (0) | 2023.07.30 |
| ASP.NET의 CSS 클래스를 사용자 컨트롤이 알 수 있도록 하는 방법 (0) | 2023.07.30 |
| 입력 번호에서 위쪽 및 아래쪽 화살표 버튼(스피너) 숨기기 - Firefox 29 (0) | 2023.07.30 |
| 도커 추가 대 볼륨 (0) | 2023.07.30 |