Заголовок накладывается списком

Question

Привет, мои замечательные взгляды.

Заголовок «все равно» перекрывается в моем списке.

Я хочу, чтобы список появился после заголовка.

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

Поскольку вы не хотите, чтобы повлиять на possition по отношению к другим элементам, вам не нужно использовать относительную attribut. Итак, ваш «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

Вы устанавливаете верхнюю часть головы: 50px. То, что происходит здесь в том, что это значение (50px) не по отношению к .list но к DIV он сидит в Просто измените значение так:.

.heading 
{ 
    position:relative; 
} 

Answer 5

Не используйте положение сверху для «.heading» класс

.heading 
{ 
    position:relative; 

} 

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

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