CSS: как я могу убедиться, что один HTML-элемент всегда находится внизу страницы? - PullRequest
Новая
       18

CSS: как я могу убедиться, что один HTML-элемент всегда находится внизу страницы?

1 голос
/ 11 сентября 2009

Скажите, у меня есть этот HTML-код: 

<html>  
<body>   
<div id="Div1" style="position:relative">
   <span style="position:absolute;top:100px">My text</span>
</div> 
<div id="Div2">
Test
</div>
</body>
</html>

Что я должен сделать, чтобы Div2 всегда был ниже Div1 независимо от содержимого Div1? Поскольку диапазон использует положение: абсолютное в Div1, содержимое Div2 появляется над содержимым Div1.

Ответы [ 7 ]

1 голос
/ 11 сентября 2009

Причина, по которой div2 отображается выше div1, заключается в том, что div2 абсолютно позиционирован. Это означает, что div1 не участвует в нормальном потоке документов, как если бы он был извлечен из документа. Итак, div2 отображается вверху, а затем ваше абсолютное позиционирование понижает div1 до 100px.

Снимите абсолютное позиционирование с div1, затем используйте поля или отступы, чтобы переместить его в нужное место. Таким образом, обычный HTML-рендеринг поместит div2 ниже div1.

Если вы вынуждены абсолютно позиционировать div1, то вам также необходимо абсолютно позиционировать div2. Возможно, вам придется использовать javascript, чтобы выяснить высоту div1 и правильно установить вершину div2. 

<html>  
<body>   
<div id="Div1" style="position:absolute; top: 100px;">
   <span>My text</span>
</div> 
<div id="Div2" style="position:absolute; top: 130px;">
Test
</div>
</body>
</html>
1 голос
/ 11 сентября 2009

Другие ответили на этот вопрос правильно о позиции: относительная и позиция: абсолютная и поток страницы в контейнере div.

Просто чтобы добавить к ответу. Следующий урок оказался действительно полезным, когда я изучал позиционирование в CSS.

Изучение позиционирования CSS за десять шагов

1 голос
/ 11 сентября 2009

Почему бы не сделать это? 

<div id="Div1" style="margin-top:100px">
   <span>My text</span>
</div> 
<div id="Div2">
Test
</div>

Я не совсем понимаю, почему вы так делаете. Не могли бы вы объяснить немного больше, что вы пытаетесь сделать? Я уверен, что есть лучший способ

0 голосов
/ 11 сентября 2009

Может как то так? 

<html>
<body>
    <div id="Div1" style="position:relative">
        <div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>      
    </div>
</body>
</html>
0 голосов
/ 11 сентября 2009

Вы хотите, чтобы div2 был ниже div1 или в самом низу страницы? если вы хотите его ниже div1, тогда добавьте 

clear:both;

до div2.

, если вы хотите, чтобы он был зафиксирован в нижней части страницы, тогда используйте свойство фиксированной позиции в div2

0 голосов
/ 11 сентября 2009

Джефф: div как стандартные блочные элементы, так что не будет никакой разницы.

Вы можете попробовать: 

<div id="Div1" style="position:relative; display:inline-block">
  <span style="position:absolute;top:100px">My text</span>
</div> 
<div id="Div2">
  Test
</div>
0 голосов
/ 11 сентября 2009

использовать дисплей: блок; на эти дивы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...