时间戳

首页 > 解决方案 > 在 css 中不可见位置绝对高于固定位置

html - 在 css 中不可见位置绝对高于固定位置

问题描述

我需要看到.inner这棵榆树，但它不起作用。z-index没有按预期工作。但是当我将.parent榆树移到位置时：绝对/静态然后它是可见的。这是正常的还是我有一些代码问题。

[注意] .innerelm 应该在.parentelm 内部，并且.parent, .childelm 应该具有相同的 z-index。例子：

body{
  margin: 0
}

.inner{
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid #d1d5da;
  z-index: 1001;
}

.parent, .child{
  z-index: 1000;
 } 

.parent{
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  
}

.child{
  position: fixed;
  top: 61px;
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
<div class="parent">
  <div class="inner" draggable="true">
    
  </div>
</div>
<div class="child"></div>

标签： htmlcss

解决方案

也z-index为固定元素设置。该z-index作品相对而言，您已将其留给浏览器默认行为。

body{
  margin: 0
}

.inner{
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid #d1d5da;
  z-index: 99999999;
}

.parent{
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  z-index:1;
}

.child{
  position: fixed;
  top: 61px;
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
<div class="parent">
  <div class="inner">
    
  </div>
</div>
<div class="child"></div>

推荐阅读