0

我正在尝试将两个 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;
}
4

2 回答 2

1

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

解决方案：

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

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

小提琴

于 2013-08-28T21:06:28.813 回答
0

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

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

于 2013-08-28T21:34:57.913 回答