Я хотел бы создать элемент отделения, который "плавает", не в смысле свойства плавающего, а скорее буквально "плавайте":
position: absolute
с достаточно высоким z-index
:
#element {
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
Это продолжение ответа Тату, которое будет работать, но использует z-индексы неуклюже, но очень часто.
Z-index определяет порядок наложения позиционированных элементов относительно других позиционированных элементов. Порядок наложения также зависит от порядка наложения родительских элементов. Итак:
Когда у вас есть два родственных элемента на странице:
<body>
<div style="position:absolute;z-index:2"></div><!-- Position 2 (top) -->
<div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) -->
</body>
Оба они располагаются в стеке согласно их родительскому элементу - body
, который по умолчанию находится «внизу» стека.
Теперь, когда у этих элементов есть дочерние элементы с z-индексами, их положение в стеке определяется относительно положения их родителей:
<body>
<div style="position:absolute;z-index:2"><!-- Position 2 (top) -->
<div style="position:absolute;z-index:2"></div><!-- Position 2.2 -->
<div style="position:absolute;z-index:1"></div><!-- Position 2.1 -->
</div>
<div style="position:absolute;z-index:1"><!-- Position 1 (bottom) -->
<div style="position:absolute;z-index:2"></div><!-- Position 1.2 -->
<div style="position:absolute;z-index:1"></div><!-- Position 1.1 -->
</div>
</body>
Я считаю полезным думать о дочерних элементах как о «точечных» z-индексах. - поэтому дочерний элемент элемента с z-index: 1
имеет z-index 1.x
. Таким образом, вы можете увидеть, что, даже если я присвою этому div z-index 100000, он никогда не появится поверх элемента с родительским z-index, равным 2. 2.x всегда появляется поверх 1.x
Это полезно, когда вы делаете «плавающие» вещи, такие как наложения, стикеры и т. Д. Такая установка - хорошее начало:
<body>
<div id="contentContainer" style="position:relative;z-index:1">
All your 'page level content goes here. You can use all the z-indexes you like.
</div>
<div id="overlayContainer" style="position:relative;z-index:2">
Anything to float 'on top of the page' goes here. Nothing inside 'contentContainer' can ever appear on top of it.
</div>
</body>
Все, что вы хотите разместить сверху, входит в ' overlayContainer »- базовые z-индексы разделяют два« слоя », и вы можете избежать использования слишком высоких z-индексов, таких как 999999 или 100000.
Ага, вам нужно, чтобы ваш CSS выглядел примерно так
.floating-div {
position: absolute;
left: 40px;
top: 40px;
z-index: 100000;
}
вы должны сделать это, используя позиционирование и z-index;