Question

我想要一个父类（ul标签）来保存一堆li标签，这些标签彼此重叠，这是我的代码：

<ul class="overlap">
    <li>
        Overlap One
    </li>
    <li>
        Overlap Two
    </li>
    <li>
        Overlap Three
    </li>
</ul>

我不希望它们被绝对定位，因为我有一个具有背景边框和颜色的父元素，但是当我绝对定位子元素时，父元素不会拉伸，这里是完整的代码

<blockquote>
 <ul class="overlap">
    <li>
        Overlap One
    </li>
    <li>
        Overlap Two
    </li>
    <li>
        Overlap Three
    </li>
</ul>
</blockquote>

blockquote标签上有背景颜色，这就是儿童无法绝对定位的原因。

提前感谢您的帮助！

Answer 1

喜欢这个？ http://jsfiddle.net/2N8Jz/

<blockquote class="clearfix">
  <ul class="overlap">
    <li>Overlap One</li>
    <li>Overlap Two</li>
    <li>Overlap Three</li>
  </ul>
</blockquote>


blockquote {
    border: 1px solid black;    
    padding: 10px;
}

.overlap {
    padding-left: 10px;
}

.overlap li {
    border: 1px solid grey;
    float: left;
    margin: 0 0 0 -10px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 2

给予<li>一个否定的margin应该可以解决问题。

这是一个例子：http://jsfiddle.net/wvEms/1/

CSS重叠元素没有绝对定位

2 个答案: