This s how it can be fixed using position relative:

Question

我宣布奥索尔(fire)为首,其行文如下:

$("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,这使这一内容变得令人信服。

目标是建立一个类似于燃烧的警示箱。

Answer 1

第二编为<代码>:静态(缺省),因此z-index不适用于。

您需要将职位财产定位于除<代码>static以外的任何事项,在这种情况下,你可能希望<代码>rel, 否则你想向z-index提供。

Answer 2

旧问题,但这一答案可能会帮助某人。

如果你试图在集装箱边界外展示集装箱内的内容,确保集装箱内有<代码>overflow:hidden,否则将切断集装箱外的任何东西。

Answer 3

Opacity改变了你的z-index,也改变了静态定位。要么增加没有这种内容的不透明性,要么将其从其中删除。你们还必须使两个要素固定不变,或确定相对或绝对立场。 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/“rel=“noreferer”http://philipwalton.com/articles/what-no-one-you-about-z-index/

Answer 4

z-index只适用于已给予明确立场的内容。 to #popupContent and You should be well to go.

Answer 5

我在使用<条码>:绝对值;时面临这个问题,我使用<条码>在儿童部分使用<条码>:相对。无需改动<代码> :绝对至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>

This s how it can be fixed using position 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;
  
  // 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>

Sandbox here

Answer 6

如果你像我这样的大ol(但知道你的定位规则是100%的正确)试图获得这样的东西:

为此:

你的解决办法可能像确保你的背景是而不是<>m>,对你在另一个要素之前想要的内容来说是透明的。

Answer 7

我有同样的问题,我试图通过<编码>申请<>/代码>解决。在<代码>div和<代码>的<代码>中,我的问题有速成(反应+材料),因此,本人知道是否将处理所有案件。

Answer 8

它可能太晚,但可以作为一种替代方法。显示绝对位置要素的分层顺序取决于将要素插入括号内的顺序。换言之,不使用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>

Answer 9

You have to specify the exact position. i used top: 0 and right: 0

const para = document.createElement("div");
para.style.backgroundColor= black ;

para.style.height= 100% ;

para.style.position= absolute 
para.id= newgrayscreen 
// Append to body:
function next(){
document.body.appendChild(para);
}

#newgrayscreen{
    top: 0;
    right: 0;
    z-index: 5000009000;
    position: relative;
    width: 100%;
    opacity: 50%;
    height: 100%;
}

<p>blah blah blah</p>
<input type= button  onclick="next();" value="click to make a gray screen appear on top of everything" >

This s how it can be fixed using position relative:

Sandbox here

友情链接