Абсолютная позиция CSS - следующий позиционированный элемент - это тело?

Цитата из msdn:

«Объект позиционируется относительно позиции родительского элемента - или по отношению к объекту тела, если его родительский элемент не позиционируется»

Допустим, я установил div с определенным размером на нижний 0; и осталось: 0; он будет расположен не внизу тела, а внизу слева от viewport. Также при задании поля body - div по-прежнему будет в нижнем левом углу viewport.

Я знаю, как работать с этими свойствами, но ищу аргументы. Разве это не тело, к которому позиционируется абсолютный элемент, когда не позиционируется никакой другой предок? Спасибо!

Вот скрипка: http://jsfiddle.net/picbig/0p6rgv8f/

HTML:

<div id="large_box_greater_than_viewport"></div>
<div id="absolute_cnt"></div>

CSS:

body{
    margin-left: 200px;
}
#large_box_greater_than_viewport{
    width: 900px;
    height: 10000px;
    background: red;
}
#absolute_cnt{
    position: absolute;
    width: 65%;
    bottom: 0;
    left: 0;
    height: 80px;
    background: rgba(0,0,0,.7);
}

css absolute position
person Max Width    schedule 18.09.2015    source источник
comment
Как писал rblarson: когда для элемента body задано значение position: relative, он перемещается в нижнюю часть тела. Но разве этот параметр в теле не должен быть установлен по умолчанию в соответствии с утверждением msdn (и многими другими источниками, указывающими то же самое)?   -  person Max Width    schedule 18.09.2015

Ответы (4)


arrow_upward
7
arrow_downward

Абсолютно позиционированные элементы позиционируются относительно содержащего их блока.

fixed расположенные элементы относительно начального содержащего блока, который занимает размеры области просмотра.

Исходный содержащий блок

Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник, называемый начальным содержащим блоком. Для непрерывных носителей он имеет размеры области просмотра и закреплен в исходной точке холста; это область страницы для страничных медиа.

И absolute позиционированные элементы относительно их содержащего блока, который устанавливается ближайшим предком с position любым другим, кроме static. т.е. fixed, absolute или relative.

Ключевой момент:

Если такого предка нет, содержащий блок является начальным содержащим блоком.

Следовательно, этот элемент с абсолютным позиционированием внутри <body> будет размещен не по отношению к самому <body>, а к исходному содержащему блоку, то есть области просмотра.

http://www.w3.org/TR/CSS2/visudet.html#contain-block-details.

person Hashem Qolami    schedule 18.09.2015
comment
всегда следует читать w3.org перед переходом на mdn, msdn ... спасибо - person Max Width; 18.09.2015

arrow_upward
3
arrow_downward

Вам нужно установить положение тела:

body{
    margin-left: 200px;
    position:relative;
}
person rblarsen    schedule 18.09.2015
comment
Правильно - когда тело установлено в положение: относительное; он перемещается в нижнюю часть тела, но разве эта настройка в теле не должна быть по умолчанию в соответствии с заявлением msdn (и многими другими источниками, указывающими то же самое)? - person Max Width; 18.09.2015
comment
Я считаю, что настройка по умолчанию для всех элементов position:static; - person rblarsen; 18.09.2015
comment
да, кроме тела, как я всегда считал по крайней мере - тогда мой студент задал мне этот вопрос, и я не мог дать ему приемлемого ответа. - person Max Width; 18.09.2015

arrow_upward
0
arrow_downward

Я пробовал несколько шаблонов в разных браузерах, и вы правы!

Объект не позиционируется относительно тела, если не позиционируется и тело!

Если тело не позиционировано, объект позиционируется относительно области просмотра.

person Sergio Internicola    schedule 18.09.2015

arrow_upward
-1
arrow_downward

1). Да, вы можете указать абсолютную позицию для тега, но вам нужно поместить этот тег внутри другого тега с относительной позицией.

2). Или вы можете сделать это с помощью функции «после до».

person Ravi Bhati    schedule 18.09.2015