it-swarm.cn

CSS我希望div能够在所有东西之上

如何使html div标签在所有内容之上?

83
Flo

为了使z-index起作用,您需要为元素提供position:absoluteposition:relative属性。一旦你这样做,你的链接将正常运行,但你可能不得不稍后调整你的CSS。

95
Skylar Anderson

要使z-index:1000生效,您需要一个非静态定位方案。

position:relative;添加到文件#settingsdetails第8行的规则mystyle.css

30
Richard JP Le Guen

您需要将position:relative;添加到菜单中。 Z-index仅在您具有非静态定位方案时才有效。

16
Rich Bradshaw

是的,为了使z-index起作用,你需要给元素一个位置:绝对或位置:相对属性。

但是......要注意父母!

您必须上升元素的节点以检查在公共父级别上第一个后代是否具有已定义的z-index。

如果在基数处存在较低的确定z指数,则所有其他后代永远不会在前景中。

在这个片段示例中,div1-2-1的z-index为1000,但仍然在div1-1-1之下,其z-index为3。

这是因为div1-1的z-index大于div1-2。

enter image description here 

.div {
  
}

#div1 {
  z-index: 1;
  position: absolute;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#div1-1 {
  z-index: 2;
  position: absolute;
  left: 230px;
  width: 200px;
  height: 200px;
  top: 31px;
  background-color: indianred;
}

#div1-1-1 {
  z-index: 3;
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}

#div1-2 {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 80px;
  top: 5px;
  background-color: red;
}

#div1-2-1 {
  z-index: 1000;
  position: absolute;
  left: 70px;
  width: 120px;
  height: 100px;
  top: 10px;
  color: red;
  background-color: lightyellow;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.rotate {
  writing-mode: vertical-rl;
  padding-left: 50px;
  font-weight: bold;
  font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
  <div class="div" id="div1-1">div1-1</br>z-index: 2
    <div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
  </div>
  
  <div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
    <div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br>   parent)</span></div>
  </div>
</div>
9
A. Morel

z-index属性使您可以在前面控制您的控制权。数字越大,你设置的元素越高。

position属性应为relative,因为html-element的位置应该相对于所有维度中的其他控件相对位置。

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}
7
Vikrant Kashyap

我会假设你用WW3学校的代码制作一个弹出窗口,对吗?检查一下css。 .modal一,那里已经有Word z-index了。只需从1更改为100。

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
3
KhmerNews Tech