Позиция списка

Question

У меня есть список, который мне нужно разместить на слайде. С помощью CSS, я переместил-список название <h2>, где я хочу это:

.reveal h2 { 
    position: absolute; 
    top: 200px; 
    left: 240px; 
} 

Проблема в том, что я не могу переместить список, чтобы быть под <h2> список титула. Вот список:

<section id="layout-example" class="slide level1"> 
<h1>Layout Example</h1> 
<h2> 
List title 
</h2> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 
</section> 

Я попытался .reveal ul {top: 220px ... и т.д., но список всегда находится в том же положении (неправильно).

Где мне добавить какую команду в css? Я сделал свой собственный css, скопировав один из примеров, включенных в show.js.

Answer 1

Когда вы используете position: absolute, элемент берется из потока документов. Таким образом, ваш <ul> теперь «становится самым верхним элементом» в потоке, независимо от того, где находится <h2>.

Чтобы сделать поток <ul> после <h2>, не используйте абсолютное позиционирование. Использование:

h2 { 
    padding-top: 200px; 
    padding-left: 240px; 
} 
ul { 
    padding-left: 240px; /* assuming you want them to align left */ 
} 

Это гарантирует, ваш <ul> следует за <h2>.

В качестве альтернативы, IF * вы должны использовать абсолютное позиционирование, а также сделать <ul> абсолютным позиционированием, например:

ul { 
    position: absolute; 
    top: 250px; /* adjust as required */ 
    left: 240px; 
}