Плавающий элемент div

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

Ответ 1

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

#element {
    position: absolute;
    top: 50px;
    left: 200px;
    z-index: 10;
}

Ответ 2

Это ответ на ответ Тату, который будет работать, но использует 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-index, поэтому у ребенка элемента с z-index:1 есть z-индекс 1.x. Таким образом, вы можете видеть, что даже если я дам этому div z-index 100000, он никогда не появится поверх элемента с родительским z-индексом 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.

Ответ 3

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

.floating-div {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 100000;
}

Ответ 4

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