Question

我试图在父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;
}

Answer 1

你的问题不是绝对放置的元素放在父div下面，而是 - 因为边距为负而将它们推到父div的边界之外。

解决方案：

由于您声明根据规范需要负边距 - 修改您的负边距并更改其text-align属性。

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

<强> FIDDLE

Answer 2

问题是容器div是overflow: hidden。这个css属性正在削减上一个/下一个div。

请参阅我的解决方案：http://jsfiddle.net/LLhZx/

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

2 个答案: