Html 标题与列表重叠

你好，我的好朋友

标题与我的列表重叠

我希望列表显示在标题后面

<div style="width:1024px;height=auto;position:absoulte;min-height:768px;">
    <div class="heading">
        <h1>Whatever</h1>
    </div>

    <div class="list" id="listID" >
        <div style="height:15px;">Nope</div>
        <div style="height:15px;">Yes</div>
        <div style="height:15px;">Maybe</div>
        <div style="height:15px;">Definetely</div>
    </div>
    <button>Print</button>
    <button style="posititon:relative;top:0px;">add</button>
</div>

---

帮帮我。谢谢：

将标题的页眉改为页边页眉

.heading
{
    position:relative;
    margin-top:50px;
}

.list
{
    position:relative;
    min-height:10px;
    top:0px;
    margin-left:20px;
}

---

因为您不想影响相对于其他元素的position，所以不需要使用relative属性。因此，您的“CSS”应该如下所示：

.heading
{
    margin-top:50px;
}

.list
{
   min-height:10px;
   margin-left:20px;
}

这将保持你的css干净

在类中添加显示：内联。列表：

css

inline该值使元素生成一个或多个inline 盒子

---

主div容器中也有语法错误。Is位置：绝对无绝对。

您设置了标题顶部：50px。这里发生的事情是，这个值50px不是相对于.list，而是相对于它所在的div。只需按如下方式更改值：

.heading
{
    position:relative;
}

---

不要在头球类中使用top位置

.heading
{
    position:relative;

}

.list
{
    position:relative;
    min-height:10px;

    margin-left:20px;
    margin-bottom:30px;
}
button{clear:both;}

---

top只会移动元素，但不会影响布局，因为边距top会同时移动元素和布局。

.heading
{
    position:relative;
}

.heading
{
    position:relative;

}

.list
{
    position:relative;
    min-height:10px;

    margin-left:20px;
    margin-bottom:30px;
}
button{clear:both;}