Как я могу получить перекрывающиеся элементы div с относительными позициями?

Я хочу, чтобы несколько div были расположены в строке рядом друг с другом, но также позволяли им перекрывать предыдущий div.

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

Моя идея заключалась в том, чтобы дать каждому div одинаковую верхнюю позицию, увеличивающийся z-индекс и увеличивающуюся левую позицию (в соответствии со временем события). Позже я выталкивал отдельные элементы div по событиям наведения мыши, чтобы визуализировать перекрытие.

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

 <div class="day">
         <div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
         <div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
         <div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
 </div>

Если я использую абсолютные позиции, элементы вылетают из окружающего div и располагаются абсолютно в каком-то месте страницы.


html css layer css-position
person TilmanBaumann    schedule 23.11.2012    source источник

Ответы (4)


arrow_upward
54
arrow_downward

Это просто. Создайте внутренний блок div, используя абсолютное позиционирование, но обернутый в div, использующий относительное позиционирование:

<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
    <div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
    <div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>

Вы можете использовать другой метод, например отрицательную маржу, но это не рекомендуется, если вы хотите динамически изменять HTML. Например, если вы хотите переместить положение внутренних элементов div, просто задайте свойства CSS контейнера сверху/слева/справа/снизу или измените свойства с помощью JavaScript (jQuery или иным образом).

Это сделает ваш код чистым и читабельным.

person Mahendra Mustika Wijaya    schedule 04.04.2014
comment
Это идеально, спасибо. Интересно, почему почти никто не мог ответить на это - person Partha; 15.05.2019

arrow_upward
33
arrow_downward

Используйте отрицательные поля!

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>

Скрипт: http://jsfiddle.net/vZv5k/

Другое решение:

Дайте классу .day width, height и position его relatively, сохранив внутренние divs absolutely positioned.

Ознакомьтесь с приведенным ниже CSS:

.day {position: relative; width: 500px; height: 500px;}

И HTML:

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>
person Praveen Kumar Purushothaman    schedule 23.11.2012
comment
Копейка упала, когда я прочитал developer.mozilla.org/en-US/docs/ CSS/position Я не мог использовать абсолютную позицию, потому что вся страница стала бы моим якорем для позиций. Но когда я помещаю position: относительный в окружающий div (дневной класс), я могу абсолютно точно позиционировать свои блоки относительно этого div. - person TilmanBaumann; 23.11.2012

arrow_upward
9
arrow_downward

Я нашел решение. Вероятно, это очевидно для любого, кто знает css.

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

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

https://developer.mozilla.org/en-US/docs/CSS/position хорошо это объясняет.

Абсолютное позиционирование абсолютно до следующего окружающего якоря. По умолчанию используется вся страница, если не определена другая привязка. Чтобы сделать что-то якорем, оно должно быть position: relative;

Быстрое решение

добавьте position: relative; в класс дня и используйте абсолютное позиционирование во внутреннем div.

person TilmanBaumann    schedule 23.11.2012
comment
Да, но в этом случае вам нужно установить width и height для класса .day. - person Praveen Kumar Purushothaman; 23.11.2012
comment
Выглядит неплохо. Вы также можете использовать отрицательные поля, верно? Поможет ли мой ответ? jsfiddle.net/vZv5k - person Praveen Kumar Purushothaman; 23.11.2012
comment
Я так полагаю. Просто похоже, что может быть довольно сложно компенсировать эффект прихода. Абсолютная позиция кажется чище. - person TilmanBaumann; 23.11.2012
comment
В моем случае я хотел, чтобы внутренний div имел ту же высоту, что и родитель, а затем установил top: 0; bottom: 0;. - person João Paulo; 01.02.2018

arrow_upward
6
arrow_downward

С помощью атрибута top вы также можете перемещать относительно расположенные объекты. В моем примере кода красная рамка перекрывает зеленую, потому что это z-index. Если убрать z-index, то зеленая рамка окажется сверху.

HTML:

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

CSS:

.wrapper {
  width: 50px;
  height: 50px;
  overflow: hidden;
}

 .box {
  width: 100%;
  height: 100%;
  position: relative;
}

 .box.one {
  background-color: red; 
  z-index: 2;
  top: 0px;
}

 .box.two {
  background-color: green; 
  z-index: 1;
  top: -50px;
}
person Benny Neugebauer    schedule 20.01.2014