代码之家 › 专栏 › 技术社区 › Ismail Rubad

z索引为1的元素位于祖父母的div下

absolute z-index css-position css html

Ismail Rubad · 技术社区 · 7 年前

放 z-index:-1 变成绝对的孩子,在祖父母的带领下。我该如何使绝对儿童归为父母而不是祖父母?

.grandparent{
  background:rgba(0, 128, 0, 0.89);
  width:500px;
}

.parent{
  position:relative;
  width:200px;
  height:200px;
  background:yellow;
}

.absolute-child{
  position:absolute;
  width:100px;
  height:100px;
  background:red;
  top:10px;
  right:-50px;
  z-index:-1;
}

 <div class="grandparent">
    <div class="parent">
      <div class="absolute-child"> absolute ch
      </div>
      <div class="siblings">siblings</div>
    </div>
 </div

1 回复 | 直到 7 年前

kukkuz 7 年前

这是你想要的,补充道 position: relative; 给奶奶所以 z-index: 0;

.grandparent{
  background:rgba(0, 128, 0, 0.89);
  width:500px;
      z-index: 0;
    position: relative;
}

.parent{
  position:relative;
  width:200px;
  height:200px;
  background:yellow;
}

.absolute-child{
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    top: 10px;
    right: -50px;
    z-index: -1;
}

<div class="grandparent">
    <div class="parent">
      <div class="absolute-child"> absolute ch
      </div>
      <div class="siblings">siblings</div>
    </div>
 </div

推荐文章

Kyle Lemon · 突出显示页脚背景和内容之间的跨距

6 年前

Valentyn Stets · Webpack 2 css加载程序在生产构建中替换z-index属性

6 年前

Nick · 浮动操作按钮z索引更改延迟

6 年前

Vandan Shah · 粘性表格标题结构中的不透明度问题

7 年前

norixxx · 当父内容将图像作为子内容,并且其他元素具有不透明度时,CSS堆栈顺序会发生变化

7 年前

assoonaspossible · 具有固定父元素的绝对定位元素上的z索引[重复]

7 年前

Ismail Rubad · z索引为1的元素位于祖父母的div下

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Tog Porter · 如何让图像滚动到导航栏后面

7 年前

Jasminder Pal Singh · 复杂的Z指数叠加问题

7 年前