Question

我的HTML结构中是否可以将带有.myelement类的元素放在首位？

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

并使用此CSS

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

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

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

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

以下是完整示例：https://jsfiddle.net/wLzej01f/

编辑如果我的所有课程都必须有位置怎么办？亲戚？我忘了提一下 https://jsfiddle.net/wLzej01f/6/

Answer 1

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

对于定位的框（即除了以外的任何位置的框）   static ），z-index属性指定：


当前堆叠上下文中框的堆栈级别。

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

有关它的更多信息here。

所以，你需要添加：

.myelement {
    position: relative;
}

更新了JSFiddle。

Answer 2

职位：亲属

.zindex1 {
  z-index: 1;
  background-color: blue;
  height: 100px;
}

.zindex2 {
  z-index: 2;
  background-color: green;
  height: 300px;
}

.myelement {
  z-index: 3;
  background-color: yellow;
  height: 500px;
  width: 100px;
  position: relative;
}

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

Answer 3

您忘了添加

override func viewWillAppear(_ animated: Bool) {
   super.viewWillAppear(animated)
...
   if ModelStruct.calendarNeedsUpdate {
      calendarTableView.reloadData()
      ModelStruct.calendarNeedsUpdate = false
   }
}

或

position: absolute;

如你所愿。

Answer 4

只需将position:relative添加到.myelement：

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

DEMO

Answer 5

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

https://www.w3schools.com/howto/howto_css_sticky_element.asp

Answer 6

.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**

CSS元素始终位于顶部

6 个答案: