Html CSS元素始终位于顶部

这是否可能使class.myelement的元素在HTML结构中始终位于顶部

<div class="zindex1">
  <div class="myelement">
    want THIS element always be on top
  </div>
</div>
<div class="zindex2">
</div>

注意：我无法更改我的z索引和HTML结构的值

以下是完整的示例：

编辑如果我的所有类都必须有position:relative怎么办？我忘了提这件事了

---

z-indexCSS属性不适用于静态元素：

对于定位框（即，具有除 静态），z索引属性指定：

当前堆叠上下文中长方体的堆叠级别

框是否建立本地堆叠上下文

更多关于它

因此，您需要添加：

.myelement {
    position: relative;
}

更新。

位置：相对位置

.zindex1{
z指数：1；
背景颜色：蓝色；
高度：100px；
}
.zindex2{
z指数：2；
背景颜色：绿色；
高度：300px；
}
myelement先生{
z指数：3；
背景颜色：黄色；
高度：500px；
宽度：100px；
位置：相对位置；
}

希望此元素始终位于顶部

您忘记添加

position: absolute;

或

---

如您所愿。

只需将

位置：相对
添加到
。myelement
：

.myelement {
  z-index: 3;
  background-color: yellow;
  height: 500px;
  width: 100px;
  position: relative;
}

如果有人试图将一个元件固定在其余元件上，或者不知道为什么一个元件低于另一个元件，请记住粘性元件

position:relative to.myelementrad edit请将zindex1的索引更改为3，您不能使myelement位于顶部，因为zindex1（其父项）是底部zindex2。您希望实现什么？为什么会有这些限制？我想把元素放在最上面，这些限制是因为我的应用程序中的架构无法更改，如果你将
z-index
设置为兄弟，浏览器就会尊重它。在您的例子中，您将
.zindex2
div放在
.zindex1
div上-因此
.zindex1
的每个子级都将位于
.zindex2
之下。希望它是清楚的。是的，我按照你说的做了，但它仍然不起作用。它永远不会工作，因为您将z-index放在主容器中，而浏览器尊重这一点。如果希望
.myelement
位于上面，则不要将
z-index
放在父同级容器中，好吗？
position: relative;

.myelement {
  z-index: 3;
  background-color: yellow;
  height: 500px;
  width: 100px;
  position: relative;
}

.zindex1 {
    z-index: 1;
    background-color: blue;
    height: 100px;
    position: relative;
}

.zindex2 {
    z-index: 0;
    background-color: green;
    height: 300px;
    position: relative;
}

.myelement {
    background-color: yellow;
    height: 500px;
    width: 100px;
    position: absolute;
    z-index: 2 !important;
}


**This code works**