DIV с относительной позиции над DIV плавать - PullRequest
Новая
       6

DIV с относительной позиции над DIV плавать

5 голосов
/ 22 декабря 2011

Я не понимаю, почему div с плавающей точкой вправо или влево не находится выше div с относительной позицией или не определяется цветом фона, когда последний объявлен после.

Вот HTML: 

<html>
<body>
    <div class="container">
        Main container <br/><br/>

        <div class="header">This is the header</div>
        <div class="text-right">Right text</div>
        <div class="footer">This is the footer</div>
    </div>
</body>

А вот и CSS: 

.header {
    background-color:blue;
    border: solid;
    color: white;
    border-color:black;
    height: 100px;
}

.text-right{
    float: right;   
    border: solid;
    background-color: green;
}

.container{
    padding: 10px;  
    border: solid;
}

.footer{
    padding-top: 50px;
    border: solid;
    background-color: yellow;
    position: relative;
}

Я знаю, что могу использовать правило .clear: оба, чтобы исправить эту проблему, но моя главная мысль такова: почему, когда я устанавливаю цвет фона или положение или оба в правиле .footer, div float находится под колонтитул

Большое спасибо!

Ответы [ 3 ]

6 голосов
/ 24 декабря 2011

Читая этот очень хороший пост , в конце поста автор рассказывает о внутренней работе z-порядка, но также говорит, что если вы хотите узнать больше, в следующем будет гораздо более подробная статья

Ключевым моментом является то, что порядок на оси Z, где размещены элементы.

Вот что говорит автор:

Если мы не укажем значения z-index, порядок размещения по умолчанию от ближайшего к пользователю до самого заднего спина выглядит следующим образом: 

1. Positioned elements, in order of appearance in source code
2. Inline elements
3. Non-positioned floating elements, in order of appearance in source code
4. All non-positioned, non-floating, block elements in order of source code
5. Root element backgrounds and borders

Как мы видим, позиционируемые элементы (1) всегда находятся сверху непозиционируемых элементов (3-4). Если я добавлю div только со свойством float, этот элемент не будет «позиционироваться» на поверхности.

В этом случае второй элемент, мой нижний колонтитул div, который расположен с относительным значением свойства, будет в начале предыдущего, не только я не добавляю свойство clear: both после float div свойство или потому что последний добавляется после плавающего элемента, а потому что он позиционирован!

Как сказал powerbuoy, вы должны установить add относительно позиции элемента float, чтобы иметь возможность занимать верхнюю часть стека плавающего элемента. Но этого недостаточно. Поскольку эти два элемента теперь находятся на одном уровне и потому что они оба пересекают друг друга, вы должны указать движку, какой из них будет первым, и поэтому вы должны установить z-порядок в 1 для плавающего элемента снова, как сказано powerbuoy.

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

1 голос
/ 22 декабря 2011

Поскольку нижний колонтитул появляется после текста справа, он будет отображаться поверх текста справа. Чтобы избежать этого, вы можете дать text-right z-index (и позицию, отличную от статической):

http://jsfiddle.net/wxMhx/

Редактировать: хммм ... нет, это не совсем правильно. Если вы удалите положение: относительный; из нижнего колонтитула текст справа будет отображаться поверх него. TBH Я не уверен , почему это происходит. Но решение в любом случае состоит в том, чтобы либо удалить позицию: относительный; из нижнего колонтитула или добавьте его (а также z-index) в текст справа.

0 голосов
/ 22 декабря 2011

Потому что position: relative.Если вы удалите эту строку, вы увидите div с text-right class.Вы можете установить z-index: -1; в footer class, и это также должно работать.

...