位置绝对后隐藏了内容

Question

在绝对位置＆lt;

之后隐藏了

内容

位置绝对隐藏我的内容

我希望我的内容是边框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%;
}

Answer 1

绝对定位的元素不会影响其容器的高度。如果你的<li>绝对定位，你需要手动给你的<ul>一个足够大的高度来容纳它们，否则它会认为它的高度是0，因为据它知道它没有' t里面的任何内容。将<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>以考虑边框。