Question

HTML：

<div class="container">
<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>
</div>

Css：

.container
{
    width:330px;
    height:100vh;
    background:#006d9a;
    position:fixed;
    float:left;
    margin:0 20px 0 0;
    z-index:1;
}

.container ul
{
    list-style-type: none;
    padding:0;
    margin:0;
}


.container ul li
{
    width:250px;
    height:75px;
    background:#00b5ff;
    margin:15px auto 0px auto;
    z-index:2;
}

http://jsfiddle.net/u7kbm/

我希望白框位于其上方的蓝框下方，如何在不增加余量的情况下执行此操作？另外，如何让白色盒子取代下面的盒子？

Answer 1

使用您的HTML结构，您必须对第一级li项使用相对定位，然后在其中使用ul的绝对定位：

.container ul > li
{
    position: relative;
}

.container ul ul
{
    position: absolute;
    top: 80px;
}

我不知道你要做什么，这可能不是一个好选择，因为你必须使用父元素的高度来硬编码上边距...

为什么我的div没有沉到底部？

1 个答案: