没有绝对定位的CSS重叠元素

我想要一个父类（

ul

tag）来保存一堆相互重叠的

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

标记上有一个背景色，这就是为什么不能绝对定位子项的原因

提前感谢您的帮助

像这样

重叠一
重叠两个
重叠三

​
大宗报价{
边框：1px纯黑；
填充：10px；
}
.重叠{
左侧填充：10px；
}
.李先生{
边框：1px纯灰；
浮动：左；
边际：0-10px；
}
.clearfix:之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
.clearfix{
显示：内联块；
}
html[xmlns].clearfix{
显示：块；
}
*html.clearfix{
身高：1%；
}
​
给
一个负的
边距应该可以达到目的

下面是一个示例：
使用
z-index
css属性
<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%;
}
​