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

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

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

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

То, что я получаю, каждый 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 и расположены абсолютно в каком-либо месте на странице.

Ответ 1

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

<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>

Fiddle: http://jsfiddle.net/vZv5k/

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

Дайте классу .day a width, height и position it relative ly, сохранив внутренний div absolute ly position ed.

Посмотрите ниже 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>

Ответ 2

простой,
внутренний 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 top/left/right/bottom контейнера или изменен с помощью javascript (jquery или другой).

он сохранит ваш код в чистоте...

Ответ 3

Я нашел решение. Это, вероятно, ослепительно очевидно для всех, кто знает css.

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

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

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

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

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

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

Ответ 4

С атрибутом 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;
}