相对元素内绝对元素的 z-index答案

【问题标题】：z-index of absolute element inside a relative element相对元素内绝对元素的 z-index
【发布时间】：2013-08-29 05:34:57
【问题描述】：

我试图将两个 div 放置在父 div 的左右两端，并带有一些负边距。看我的小提琴：http://jsfiddle.net/z9Unk/239/

但我的绝对 div（具有负边距的部分）堆叠在 paren div 后面。相反，我希望它们位于父 div 之上。

我下面的代码有什么问题？

即使我为绝对元素设置了 z-index:100。

HTML

<div class="item1">
  <div class="item3 prev ">
      Item3
  </div>
  <div class="item4 next">
      Item4
  </div>
  <div class="item2">
      item2
  </div>
  <div class="item2">
      item2
  </div>
</div>

CSS：

.item1 {
  position:relative;
  white-space: nowrap;
  width:auto;
  overflow: hidden;
  border:2px solid red;
  display:inline-block;
}

.item2 {
 position:relative;
  float:left;
  background-color: green;
  width : 255px;
  height : 205px;
  margin-right:6px;
  border:1px solid blue;
}

.item3, .item4 {
  top:65px;
  display:block;
  position: absolute;
  width: 50px;
  height: 50px;
  border:1px solid black;
  z-index:100;
}

.prev {
    left:-25px;
}
.next {
    right:-25px;
}

【问题讨论】：

他们看着我 - jsfiddle.net/danield770/z9Unk/240
我也是。火狐、Safari 和 Chrome。您使用哪种浏览器:-)？
我的意思是在文本“item4”的情况下，“m4”不可见，而在文本“item3”的情况下，“ite”不可见..我理解左侧是身体的末端......但右侧 m4 sld 是可见的

标签： html css

【解决方案1】：

您的问题不是绝对放置的元素被放置在父 div 下方，而是 - 由于负边距，您将它们推到了父 div 的边界之外。

解决方案：

既然您声明您需要按照规范的负边距 - 修改您的负边距并更改它们的 text-align 属性。

.prev {
    left:-15px;
    text-align: right;
}
.next {
    right:-15px;
    text-align: left;
}

FIDDLE

【讨论】：

我想要 -ve 边距，以便 item3,4 稍微超出父 div ......这就是我想要的设计
因此，根据您的需要更改边距，并以不被剪切的方式更改文本
感谢您对我的帮助...我可以找到设置边距的“方法”，因此文本不会被剪切...因此我提出了这个问题。

【解决方案2】：

问题是容器 div 是overflow: hidden。这个 css 属性正在切割 prev/next div。

查看我的解决方案：http://jsfiddle.net/LLhZx/

【讨论】：