CSS position: absolute Vs relative

Kalisnik · May 6, 2011

Код CSS:


.base {
    width: 900px;
    background-color: red;
    position: relative;
    margin: auto;
}
.left {
    width: 150px;
    height: 500px;
    position: absolute;
    background-color: green;
    left: 20px;
    top: 200px;
}

Код HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="myCSS.css" />
</head>
<body>
    <div class="base">
        <div class="left"></div>
    </div>
</body>
</html>

Вопрос: Почему я вижу зеленый блок, но не вижу красного?

rash · May 6, 2011

Потому что красный у вас нулевой высоты. Контент с абсолютным позиционированием не влияет на размер родителя.

psywalker · May 6, 2011

а где высота у родителя? Поставь и увидишь свой любимый красный цвет)

Kalisnik · May 6, 2011

rash Спасибо. Плюс репутации почему-то не работает. В догонку еще спрошу. Если я делаю класс "left" тоже relative, красный блок я вижу, однако... почему в этом случае в классе "left" margin-top и margin-bottom смещают также и родительский блок класса "base", хотя по логике смещаться ведь должен дочерний блок внутри родительского?

psywalker · May 6, 2011

rash Спасибо. Плюс репутации почему-то не работает. В догонку еще спрошу. Если я делаю класс "left" тоже relative, красный блок я вижу, однако... почему в этом случае в классе "left" margin-top и margin-bottom смещают также и родительский блок класса "base", хотя по логике смещаться ведь должен дочерний блок внутри родительского?

Нет, логика может и верна человеческая, но не специфичная. Это называется margn collapse

rash · May 6, 2011

rash Спасибо. Плюс репутации почему-то не работает. В догонку еще спрошу. Если я делаю класс "left" тоже relative, красный блок я вижу, однако... почему в этом случае в классе "left" margin-top и margin-bottom смещают также и родительский блок класса "base", хотя по логике смещаться ведь должен дочерний блок внутри родительского?

Вам уже правильно ответили, это — схлопывание маргинов, в некоторых случаях это бывает удобно, но нужно все время помнить об этой особенности.

Чтобы «отключить» это нужно родителю задать бордер или использовать не маргин дочернего элемента а паддинг родителя.

psywalker · May 6, 2011

rash Спасибо. Плюс репутации почему-то не работает. В догонку еще спрошу. Если я делаю класс "left" тоже relative, красный блок я вижу, однако... почему в этом случае в классе "left" margin-top и margin-bottom смещают также и родительский блок класса "base", хотя по логике смещаться ведь должен дочерний блок внутри родительского?
Чтобы «отключить» это нужно родителю задать бордер или использовать не маргин дочернего элемента а паддинг родителя.

Либо overflow: hidden;

Kalisnik · May 6, 2011

rash, psywalker Спасибо.

psywalker · May 6, 2011

rash, psywalker Спасибо.

Тебе спасибо :rolleyes:

Kalisnik · May 6, 2011

psywalker :rolleyes:

Sign In

CSS position: absolute Vs relative

Question

Kalisnik

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Kalisnik

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Kalisnik

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Kalisnik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information