Как мога да получа припокриващи се 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(s), просто задайте 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>

Fiddle: 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: relative в околния 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; към дневния клас и използвайте абсолютно позициониране във вътрешния 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