Почему позиция абсолютная отображается выше позиции статическая?

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

Я знаю, что могу исправить это с помощью z-index - Но в чем причина?

JSBIN: http://jsbin.com/yadoxiwuho/1

<style> 
    .with-absolute { 
     position:absolute; 
     top:0px; 
     bottom:0px; 
     background-color:red 
    } 
    .other { 
     background-color:yellow; 
    } 
    </style> 
    </head> 
<body> 
    <div class="with-absolute">Hello</div> 
    <div class="other">Why is this not on top? It comes last</div> 
</body>

источник

2015-05-04 zolv

Абсолютные:

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

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

Вот пример кода:

#box_1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 200px; 
    background: #ee3e64; 
} 
#box_2 { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    height: 200px; 
    background: #44accf; 
}

DEMO от автора документ Ноа Стокса.

Очевидно здесь

источник

2015-05-04 10:15:09 pcs

Обратитесь к http://stackoverflow.com/help/referencing за помощью при цитировании внешних источников. – BoltClock

спасибо, сэр .. для вашего сведения. – pcs

абсолютное элемент позиционируется по отношению к ее первой позиционируется (не статический) предка элемент

Reference.

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

Reference.

источник

2015-05-04 10:12:49 odedta

Обычно значение по умолчанию для z-индекса абсолютных элементов равно 0, которое находится выше статической позиции. Если вы хотите переместить его, установите z-index на -1.

источник

2015-05-04 10:14:20

Ничего себе, с тех пор, когда ?? Я программировал css уже 15 лет и мне никогда не приходилось играть с z-индексами. Абсолютные элементы показывали по потоку DOM. Если бы у меня было двое детей, первое - абсолютное, второе - сверху. –

Все статические элементы в Ноа СтоксаDOCUMENT о позиционировании CSS имеют Z-индекс по умолчанию (авто), а это означает, ноль.

Только логическое объяснение, которое у меня есть, заключается в том, что когда вы добавляете position: relative|absolute|fixed к элементу, вы размещаете его вне потока документов, и поэтому он становится z-индексом 1.

источник

2015-05-04 10:15:50 LinkinTED

Порядок краски элементов определяются CSS 2.1 spec, E.2 Painting order

статических элементов, расположенных окрашены в шагах 4 до 7. Абсолютных расположенных элементов с г-индексом 0 окрашены в шаге 8, так что всегда на вершине.

источник

2015-05-04 10:34:37 Alohci

Спасибо, что ответили на этот вопрос. В то время как другие ответы, похоже, содержат правильную информацию, я не вижу, как они относятся к вопросу – Danield

@Danield. Оригинальный вопрос задан для _reason_. Этот ответ говорит «только потому, что!» –

Это единственный ответ на вопрос. – Nigiri

Почему позиция абсолютная отображается выше позиции статическая?

ответ

Смежные вопросы