css - 绝对位置后内容已被隐藏

绝对位置后，内容已被隐藏<

绝对要隐藏我的内容

我希望我的内容边框为5px

但键入此代码后，我的内容已隐藏

参见：http://qass.im/checked

.wrapper > ul {
list-style: none;
position: relative;
z-index:1;
clear:both;
border:5px solid #ccc;
}

.wrapper > ul > li {
position: absolute;
left:0;
top:0;
width: 100%;
}

最佳答案

绝对定位的元素不会影响其容器的高度。如果<li>的位置绝对正确，则需要手动给<ul>一个足够大的高度以容纳它们，否则它会认为其高度为0，因为据我所知，里面没有任何内容它的。将<ul>的css更改为此，然后修改高度，直到获得所需的功能：

.wrapper > ul {
    list-style: none;
    position: relative;
    z-index:1;
    clear:both;
    border:5px solid #ccc;
    height:30px; /* Added this line to create a space for the <li>s */
}

注意：您可能还需要更改top上的left和<li>来说明边框。

关于css - 绝对位置后内容已被隐藏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18995548/