z-index가 position absolute에서 작동하지 않음

z-index가 position absolute에서 작동하지 않음

콘솔(크롬\파이어폭스)을 열고 다음 줄을 실행했습니다.

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

그#popupContent무엇보다도 중요하지만 그것은 영향을 받습니다.#popupFrame불투명성

내용이 에 포함되어 있지 않습니다.#popupFrame그래서 정말 이상한 일입니다.

목표는 파이어폭스와 같은 경보 상자를 만드는 것입니다.

두번째 나눗셈position: static(기본값) 따라서 z-index가 적용되지 않습니다.

위치를 지정해야 합니다(위치 속성을 다음과 같이 설정).static, 당신은 아마도 원할 것입니다.relative이 경우) 당신이 주고 싶은 것은 무엇이든.z-index로.

오래된 질문이지만 이 대답은 누군가에게 도움이 될 수도 있습니다.

컨테이너의 경계 밖에 있는 컨테이너의 내용물을 표시하려는 경우, 해당 컨테이너에 다음이 없는지 확인합니다.overflow:hidden, 그렇지 않으면 그 밖의 어떤 것도 끊어질 겁니다

불투명도는 정적 위치 지정과 마찬가지로 z 인덱스의 컨텍스트를 변경합니다.존재하지 않는 요소에 불투명도를 추가하거나 존재하는 요소에서 제거합니다.또한 두 요소를 모두 정적 위치로 만들거나 상대적 또는 절대적 위치를 지정해야 합니다.다음은 컨텍스트에 대한 몇 가지 배경입니다. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

z-index명시적인 위치가 주어진 요소에만 적용됩니다. 추가position:relative#popupContent로 이동하시면 됩니다.

사용할 때 이런 문제가 자주 발생했습니다.position: absolute;, 를 사용함으로써 이 문제에 직면했습니다.position: relative자식 요소에 있어요.바꿀 필요가 없습니다position: absolute로.relative, 아래 두 가지 예에 하위 요소를 추가해야 합니다.

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

위치 상대를 사용하여 고정할 수 있는 방법은 다음과 같습니다.

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
  
  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

여기 샌드박스

만약 당신이 나와 같은 '올드덤'이라면(그러나 당신의 위치 결정 규칙이 100% 정확하다는 것을 알고), 이런 것을 얻기 위해 노력하는 것입니다.

다음과 같이 보입니다.

당신의 해결책은 당신이 다른 요소의 앞/뒤에 원하는 요소에 대해 배경이 투명하지 않도록 하는 것처럼 간단할 수 있습니다.

저도 같은 문제를 가지고 있었고, 그 문제를 해결하기 위해 노력했습니다.appending와의 요소.absolute position일순간에div와 함께sticky position, 제 문제가 speeddial( reactjs + material)에 있어서 모든 케이스에 적용이 가능할지 모르겠습니다.

너무 늦었을 수도 있지만 대안적인 방법으로 선호할 수 있습니다.절대 위치에 요소를 표시하는 도면층 순서는 요소가 상위 요소에 삽입되는 순서에 따라 달라집니다.즉, z-index를 사용하는 대신 $(부모)와 함께 추가하여 뒤로 보내는 것이 가능합니다.(나를) 앞에 붙여서 (부모를) 앞에 붙입니다.(나를) 덧붙입니다

function BringToFront(){
  $("#parent").append($("#me"));
}

function SendToBack(){
  $("#parent").prepend($("#me"));
}

#mySister{
  position:absolute;
  left:25px;
  top:25px;
  width:100px;
  height:100px;
  background-color: red;
}

#me{
  position:absolute;
  left:50px;
  top:50px;
  width:100px;
  height:100px;
  background-color: yellow;
}

#myBrother{
  position:absolute;
  left:75px;
  top:75px;
  width:100px;
  height:100px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="parent">

  <div id="mySister">&nbsp;</div>

  <div id="me">Hello! this is me!</div>
  
  <div id="myBrother">&nbsp;</div>

</div>

<button type="button" onclick="BringToFront()">Bring to front</button>
<button type="button" onclick="SendToBack()">Send to back</button>

언급URL : https://stackoverflow.com/questions/14483589/z-index-not-working-with-position-absolute