Question

你好我的精彩窥视。

标题＆＃34;无论什么＆＃34;重叠在我的名单上。

我希望列表出现在标题之后。

<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>

这是css

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

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

http://jsfiddle.net/zd5n3L5z/

帮帮我。谢谢:)）

Answer 1

将标题的顶部更改为页边距

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

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

Answer 2

由于您不希望影响与其他元素相关的位置，因此您不需要使用相对属性。所以你的'CSS'应该是这样的：

.heading
{
    margin-top:50px;
}

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

这样可以保持你的css干净！

Answer 3

在班级display: inline中添加.list：

<强> CSS

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

.list
{
    position:relative;
    min-height:10px;
    top:0px;
    margin-left:20px;
    display: inline;/*Add display inline*/
}

fiddle

内联此值会导致元素生成一个或多个内联框。

您的主div容器中也存在语法错误。 position:absolute没有absoulte。

Answer 4

你设置.heading顶部：50px。这里发生的是这个值（50px）不是相对于.list而是相对于它所在的div。只需改变这样的值：

.heading
{
    position:relative;
}

Answer 5

不要将位置顶部用于＆＃34; .heading＆＃34;类

.heading
{
    position:relative;

}

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

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

标题与列表重叠

5 个答案: