Плавающий элемент отделения

Я хотел бы создать элемент отделения, который "плавает", не в смысле свойства плавающего, а скорее буквально "плавайте":

alt text

10
задан Meg 14 October 2019 в 15:55
поделиться

4 ответа

position: absolute с достаточно высоким z-index:

#element {
    position: absolute;
    top: 50px;
    left: 200px;
    z-index: 10;
}
9
ответ дан 3 December 2019 в 22:35
поделиться

Это продолжение ответа Тату, которое будет работать, но использует 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.

5
ответ дан 3 December 2019 в 22:35
поделиться

Ага, вам нужно, чтобы ваш CSS выглядел примерно так

.floating-div {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 100000;
}
1
ответ дан 3 December 2019 в 22:35
поделиться

вы должны сделать это, используя позиционирование и z-index;

0
ответ дан 3 December 2019 в 22:35
поделиться
Другие вопросы по тегам:

Похожие вопросы: