CSS Z- 색인이 작동하지 발생 (절대 위치)

CSS Z- 색인이 작동하지 발생 (절대 위치)

---

div두 번째 노란색 (절대) 위에 검은 색 (상대적) 을 만들려고합니다 . 흑인 div의 부모도 절대적인 위치를 가지고 있습니다.

#relative {
	position: relative;
	width: 40px;
	height: 100px;
	background: #000;
	z-index: 1;
	margin-top: 30px;
}
.absolute {
	position: absolute;
	top: 0; left: 0;
	width: 200px;
	height: 50px;
	background: yellow;
	z-index: 0;
}

<div class="absolute">
    <div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>

예상 결과 :

---

없애다

z-index:0;

에서 .absolute.

여기에 바이올린이 업데이트되었습니다.

---

이는 스태킹 컨텍스트 때문이며 Z- 색인을 설정하면 모든 하위 항목에도 적용됩니다.

<div>후손 대신 두 형제를 만들 수 있습니다.

<div class="absolute"></div>
<div id="relative"></div>

http://jsfiddle.net/P7c9q/3/

---

나는이 문제로 어려움을 많이 사용한다 ( 이 게시물 덕분에) 다음 과 같은 것을 배웠습니다 .

불투명도는 Z- 색인에도 영향을 미칠 수 있습니다.

div:first-child {
  opacity: .99; 
}

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}

.green {
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

---

다음과 같은 이미지 위에 div를 배치하는 방법을 알아 내려고 애 썼습니다.

div (이미지 래퍼)와 섹션에서 Z- 색인을 어떻게 구성했는지 관계없이 다음을 얻었습니다.

섹션의 배경을 설정하지 않은 것으로 밝혀졌습니다. background: white;

그래서 기본적으로 다음과 같습니다.

<div class="img-wrp">
  <img src="myimage.svg"/>
</div>
<section>
 <other content>
</section>

section{
  position: relative;
  background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */
}
.img-wrp{
  position: absolute;
  z-index: -1; /* also worked with 0 but just to be sure */
}

---

다른 .second div 앞에 두 번째 .absolute div를 추가하면됩니다.

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

두 요소의 인덱스가 0이기 때문입니다.

---

이 코드를 시도하십시오.

.absolute {
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 50px;
    background: yellow;

}

http://jsfiddle.net/manojmcet/ks7ds/

---

JSFiddle

두 번째 div를 첫 번째 div 위에 두어야합니다. 둘 다 Z- 색인이 0이므로 dom의 순서에 따라 맨 위에있는 div가 결정됩니다. 이는 Z- 색인이 상위 div 내부의 요소와 관련되기 때문에 상대적 위치 div에도 영향을줍니다.

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

CSS는 동일하게 유지됩니다.

---

이것은 어떤가요?

http://jsfiddle.net/P7c9q/4/

<div class="relative">
  <div class="yellow-div"></div>
  <div class="yellow-div"></div>
  <div class="absolute"></div>
</div>

.relative{
position:relative;
}

.absolute {
position:absolute;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
top:30px;
left:0px;
}
.yellow-div {
position:relative;
width: 200px;
height: 50px;
background: yellow;
margin-bottom:4px;
z-index:0;
}

상대 div를 래퍼로 사용하고 노란색 div가 정상적인 위치를 갖도록합니다.

검은 색 블록 만 절대 위치를 가져야합니다.

---

나는 z-indexbody wrapper z-index:-1와 body z-index:-2, 그리고 다른 div 를 만들어 내 문제를 해결했다 z-index:1.

그리고 나중 div는 z-index200+ 작동하지 않습니다 . 내가 position:relative각 요소를 가지고 있지만 기본적으로 본문 z-index이 작동하지 않습니다.

이것이 누군가에게 도움이되기를 바랍니다.

참조 URL : https://stackoverflow.com/questions/20971340/css-z-index-not-working-position-absolute