Раздражающее поведение позиционирования: абсолютное

Насколько мне известно, элемент с абсолютным позиционированием и плавающий элемент удаляются из нормального потока html (поправьте меня, если я ошибаюсь).

Вот мой jsFiddle

Вот мой код:

<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>

мой CSS:

.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}

когда я пишу что-нибудь внутри своего main-area, почему правая боковая панель скользит вниз.


person shubendrak    schedule 09.08.2013    source источник
comment
вы не можете использовать абсолютный элемент, используйте правый или левый   -  person David Chase    schedule 09.08.2013
comment
какое преимущество у него есть при плавании абсолютного элемента? я могу позиционировать абсолютный элемент напрямую, используя левый, правый   -  person shubendrak    schedule 09.08.2013
comment
я не понимаю ваш вопрос? нет никакого преимущества в плавающем абсолютном элементе, потому что он не работает   -  person David Chase    schedule 09.08.2013
comment
@DavidChase ой! извините, я неправильно прочитал.   -  person shubendrak    schedule 09.08.2013


Ответы (3)


Добавьте свойство top на боковую панель

.right-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

Когда указана позиция absolute, ожидается, что вы позиционируете элемент, то есть вы должны установить его свойства top, bottom, left и right в желаемые значения. Если одно из этих свойств не установлено, браузер позиционирует их, так как они будут установлены на auto.

person Kevin Bowersox    schedule 09.08.2013
comment
спасибо, но не могли бы вы объяснить мне причину такого поведения. - person shubendrak; 09.08.2013
comment
я не могу понять. можешь уточнить. насколько мне известно, используя абсолютную позицию, просто зафиксируйте блок в указанной позиции относительно родительского div (относительное расположение). После всего этого, что заставляет боковую панель скользить вниз - person shubendrak; 09.08.2013
comment
Поскольку вы не установили правую панель на top:0; это только заставляет его обнимать правую сторону div. Вам нужно установить top на 0, если вы хотите, чтобы div обнимал верх. Вы не замечали, что он движется вниз без него, пока не был добавлен контент, потому что контент будет толкать его вниз, но не в любом другом направлении. Как только вы установите top:0; он говорит ему оставаться в самой верхней точке div независимо от содержимого, помещенного в div. Я надеюсь, что это объяснение поможет. - person Phorden; 09.08.2013
comment
Спасибо. это было полезно - person shubendrak; 09.08.2013
comment
@Shubendra Рад, что смог помочь. Это обеспечивает некоторый дополнительный контекст: stackoverflow .com/questions/5399708/ - person Kevin Bowersox; 09.08.2013
comment
@KevinBowersox хорошо, есть еще одно сомнение. проверьте эту скрипту jsfiddle.net/fyE4B/8 В этом я использовал float. что заставляет правую боковую панель двигаться вниз в этом случае. - person shubendrak; 09.08.2013
comment
@Shubendra Это потому, что блочные элементы расширяются, чтобы заполнить ширину своего контейнера. Таким образом, div области содержимого расширяется и сдвигает правую боковую панель вниз. Если вы добавите float слева в область содержимого, он уменьшится до размера содержимого (просто природа плавающих div) - person Kevin Bowersox; 09.08.2013
comment
плавающий элемент с абсолютным позиционированием также удаляется из обычного потока html. по этому правилу плавающая правая боковая панель должна располагаться над div области содержимого - person shubendrak; 09.08.2013

Как вам сказали, поставьте top:0, чтобы это исправить.

Хорошо, причина:

Проверьте эту ссылку: http://dev.w3.org/csswg/css-position/#abs-non-replaced-height

Раздел, который вы ищете, - это 2-е правило: (курсив добавлен мной)

Если «верх» и «низ» — «авто», а «высота» — не «авто», то установите «верх» в статическое положение, а затем найдите «низ».

И в этом причина. Помните, что top по умолчанию имеет значение auto, а не 0.

person chris-l    schedule 09.08.2013
comment
спасибо, это действительно помогает - person shubendrak; 09.08.2013
comment
@ Рад, что ты смог найти это в спецификации, потому что я точно не смог! Кстати, что вы искали, чтобы найти это? - person Kevin Bowersox; 09.08.2013
comment
Я понимаю, что вы имеете в виду, может быть очень неприятно находить что-то в спецификации. Я искал site:dev.w3.org position absolute в Google, этот документ является первым результатом, но затем мне пришлось прочитать индекс, и заголовок РАЗМЕРЫ И ДЕТАЛИ ПОЗИЦИОНИРОВАНИЯ показался многообещающим. - person chris-l; 09.08.2013
comment
@chris хорошо, есть еще одно сомнение. проверьте эту скрипту jsfiddle.net/fyE4B/8 В этом я использовал float. что заставляет правую боковую панель двигаться вниз в этом случае. - person shubendrak; 09.08.2013
comment
@Shubendra, это совершенно другое, использование float ничего не удаляет из нормального потока. - person chris-l; 09.08.2013
comment
@chris, не могли бы вы помочь или указать мне ссылку, чтобы развеять мои сомнения. я думаю, что плавающий элемент также удален из нормального потока html - person shubendrak; 09.08.2013
comment
@Shubendra, это выходит за рамки этого поста, можете ли вы создать для этого новый вопрос? - person chris-l; 09.08.2013
comment
Да, конечно. после того, как я сделаю, я отправлю вам ссылку здесь - person shubendrak; 09.08.2013
comment
stackoverflow .com/questions/18150765/ - person shubendrak; 09.08.2013

Добавьте top:0; на правую панель. После этого он больше не должен давить вниз.

person Phorden    schedule 09.08.2013