Почему изменение положения зависит от непрозрачности

Я пытаюсь понять позиционирование и относительно absolute У меня проблема.Почему изменение положения зависит от непрозрачности

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

Затем они расположены по отношению к первому родительскому элементу, который не имеет position: static;. Если такого элемента нет, элемент с положением: абсолютный позиционируется относительно <html>.

Итак, здесь я создал скрипку с тремя разными div, каждая из которых имеет один цвет. Все три имеют непрозрачность 0,5. ->https://jsfiddle.net/uwqoy4zh/

Когда я установил второй DIV в положение: абсолютный, он удаляется из потока, и поэтому я вижу розовую один на своем месте ->https://jsfiddle.net/401ykurg/

Однако, когда я точно то же самое, но без изменения прозрачности, тот, который удаляется из потока, розовый! ->https://jsfiddle.net/qnou6Lya/

Что я не понимаю?

Кроме того, я вижу, что в примере, который работает (где он удаляет желтый цвет из потока), где на самом деле положение находится за розовым, а не синим.

Я могу видеть это, делая желтый немного шире ->https://jsfiddle.net/tszm65cu/

Если абсолютно позиционируемых расположены по отношению к первому родительскому элементу он имеет, что не имеет position: static и когда нет такого элемента, элемент с position: absolute позиционируется относительно окна документа, почему он не позиционирует желтый div под синим?

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

Почему это так?

Спасибо!

источник

2015-12-17 New to this

Непрозрачность влияет на значения z-index .... это может быть оно. –

См. Контекст стекирования в MDN: https: //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context –

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ –

непрозрачности не влияет на позицию.

Когда вы делаете желтый div абсолютно позиционированным, независимо от его непрозрачности, вы удаляете его из потока. Потому что вы не заявляете что-то вроде top: 0 и left: 0 в дополнение к этому, он остается там, где он есть.

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

Возможно, вы захотите больше посмотреть в z-index, чтобы контролировать, какой из них находится сверху.

источник

2015-12-17 17:47:06

Awww, теперь я понял! Большое спасибо за ваше объяснение и помощь! –

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

Так как элемент с непрозрачностью менее 1, скомпонован из одного внеэкранных изображений, содержание вне его не может быть слоистыми в г-порядке между кусками контента внутри него. По той же причине реализации должны создать новый контекст стекирования для любого элемента с непрозрачностью менее 1. Если элемент с непрозрачностью менее 1 равен , он не должен быть размещен, реализации должны рисовать создаваемый им слой, в контексте родительского стека , при том же порядке укладки, что будет использоваться, если бы это был позиционированный элемент с «z-index: 0» и «непрозрачность: 1».Если элемент с непрозрачностью меньше 1, свойство 'z-index' применяется, как описано в [CSS21], за исключением того, что «auto» рассматривается как «0», так как новый контекст стекирования всегда создается . См. Раздел 9.9 и Приложение E [CSS21] для получения дополнительной информации о контекстах стекирования. Правила в этом параграфе не относятся к элементам SVG, а , поскольку SVG имеет свою собственную модель рендеринга ([SVG11], Глава 3).

Проверить эту скрипку: https://jsfiddle.net/401ykurg/1/

opacity: 0.99; 
    z-index: 1;

Филип Уолтон написал прекрасную статью о том, что: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

источник

2015-12-17 17:23:21

люблю эту статью, делясь всем этим время! –

В вашем примере у вас есть три элемента div, которые все расположены statically, что относится к положению элементов позиционирования по умолчанию. Короче говоря, они будут расположены точно так же, как вы их разместили в HTML.

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

Так что же это имеет отношение к вашему пример? В вашем примере вы имеете дело с непрозрачностью. Подумайте о том, что происходит, когда вы делаете элемент прозрачным с определенным процентом, что по существу делает видимый элемент видимым.

Когда вы используете position: absolute на одном из ваших элементов, он перемещает указанный элемент из потока с другими элементами на странице. В вашем случае, поскольку все размеры элементов одинаковы, поведение по умолчанию абсолютного позиционированного элемента заключается в том, чтобы сидеть прямо под (или выше ...) ваши не абсолютные позиционированные элементы. Возвращаясь к вашей непрозрачности, поскольку оба элемента имеют прозрачность и разные цвета фона; из-за того, что цвет перекрывается поверх другого, вы, по существу, создали эффект перекрытия цвета.

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

источник

2015-12-17 19:28:38 AGE

Почему изменение положения зависит от непрозрачности

ответ

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