I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div.
What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other.
My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap.
What I do is to make it so each div gets placed under the next one. With fiddling of the top attribute I can get them to align horizontally, but I don't see the pattern.
<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>
If I use absolute positions, the elements fly out of the surrounding div and are positioned absolutely at some place in the page.
It's simple. Make an inner div using absolute positioning but wrapped with a div that uses relative positioning:
<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>
You can use another method like negative margin, but it's not recommended if you want to dynamically change HTML. For example, if you want to move the position of the inner div(s), just set the top/left/right/bottom CSS properties of the container or modify the properties using JavaScript (jQuery or otherwise).
It will keep your code clean and readable.
Use Negative Margins!
<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/
Another Solution:
Give the .day class a width, height, and position it relatively, keeping the inner divs absolutely positioned.
Check out the below CSS:
.day {position: relative; width: 500px; height: 500px;}
And the 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>
I found the solution. It's probably blindingly obvious to anyone who knows css.
I thought I could not use absolute positioning because my elements would fly out of the surrounding div.
Turns out, I misunderstood absolute positioning. It's not the same as fixed, but to me it looked like that.
https://developer.mozilla.org/en-US/docs/CSS/position explains it well.
Absolute positioning positions absolutely to the next surrounding anchor. That defaults to the whole page, if no other anchor is defined.
To make something a anchor it needs to be position: relative;
Quick solution
add position: relative; to the day class and using absolute positioning in the inner div.
With the top attribute, you can also move relatively positioned objects. In my code sample the red box overlaps the green box due to it's z-index. If you remove the z-index, then the green box is on top.
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;
}
Related
I have a series of divs with z-index:20 (this is a must be for visual styling reasons), but inside one of them, I have a datepicker which stands as position:absolute floating above everything. I've assigned z-index: 1000 as a great value in order to achieve this.
I discovered the inner z-index this doesn't work because of the parent container. Is there such a hack to workaround this ?
The parent container must have such z-index in order to be above a sibling div, but the datepicker, which is inside one of the boxes, must be on top of everything, and now it is hiding under the next box.
This is the codepen with an actual example: http://codepen.io/anon/pen/jWZMPw
The problem is that .box creates a stacking context because it's a positioned element with non-auto z-index.
Don't do that. Remove
.box {
z-index: 20;
}
.banner {
padding: 10px;
background: #454545;
position: fixed;
width: 100%;
}
.box {
position: relative;
float: left;
margin-left: 20px;
min-width: 100px;
min-height: 100px;
border: 1px solid #999;
padding: 20px;
background: #45e;
}
.box:first-child {
margin-left: 0;
}
.dtpicker {
background-color: #34ed22;
padding: 20px;
min-width: 100px;
min-height: 100px;
position: absolute;
left: 50px;
z-index: 50;
}
<div class="banner">
Something behind
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
<div class="dtpicker">
Dt picker
</div>
</div>
<div class="box" >
Box
</div>
I recommend reading What No One Told You About Z-Index.
The question is: is it possible? I have a div with relative position. Inside this div, I have another div with position: absolute and top: whatever.
This absolute positioned div overlaps content in parent div without any problems, but another relative position div (outside parent) doesn't even care. Before this question I googled as I much as I could, so I'm for 90% sure that it's impossible, or I'm on a wrong way, but I need to be sure.
Here is an example http://jsfiddle.net/MNLbZ/2/
HTML
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main"></div>
CSS
.main {
background: green;
position: relative;
height: 100px;
width: 100px;
z-index: 100;
}
.content {
position: relative;
z-index: 500;
width: 100px;
}
.abs {
position: absolute;
width: 50px;
height: 300px;
top:0;
right: 0;
background: red;
z-index: 999;
opacity: .5;
}
The z-index of the second .main div must be lower than that of the first div that contains the absolute div:
add a class to the second main
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main second"></div>
then use this style:
.second {z-index:99;}
Example
I have a div that is positioned absolutely in CSS. That div has overflow:auto so sometimes it shows a scrollbar if it has a lot of content. I need to completely overlay that div with another div, this one semitransparent so as to completely cover the first div.
The problem is that when a scrollbar is shown in the outer div, the overlay div does not cover it.
My HTML
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
</div>
<div id="overlay">
</div>
</div>
My CSS
div#outer {
overflow: auto;
position: absolute;
top: 60px;
left: 20px;
height: 200px;
width: 200px;
border: 3px solid blue;
}
div#content {
background-color: lightgray;
}
div#overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: yellow;
opacity: 0.8;
z-index: 2;
}
Run this here:
http://jsfiddle.net/pTnXF/4/
Any ideas?
Placing the #overlay inside #content and adding a "position:relative" to #content could work.
http://jsfiddle.net/pTnXF/5/
HTML changes
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
<div id="overlay">
</div>
</div>
</div>
CSS changes
div#content {
background-color: lightgray;
position: relative;
}
jquery
$("#overlay").css("height",($('#outer')[0].scrollHeight));
The best way to explain this is via example:
http://jsfiddle.net/e7JjU/
I have a pretty good understanding of z-indexes and the stacking context but I cannot figure out a logical reason div1 (blue) is able to appear between the stacks of red and green. Can someone please explain this?
#div1{
width: 200px;
height: 50px;
background-color: blue;
position: relative;
top: 20px;
left: 15px;
z-index: 1;
}
#div2 {
width: 200px;
height: 50px;
position: relative;
top: -50px;
background-color: red;
}
#inner{
width: 200px;
height: 50px;
position: relative;
top: 40px;
left: 30px;
background-color: green;
z-index: 2;
}
and the HTML...
<div id="div1"></div>
<div id="div2">
<div id="inner"></div>
</div>
Your red div, #div2 doesnt have a z-index. But #div1 and #inner do. If you were to put the z-index on #div2 then the blue div would not appear between the green div and red div.
z-index applies to the parent divs and child divs.
<div id="div1" style="z-index:1"></div>
<div id="div2" style="z-index:2">
<div id="div4" style="z-index:4;"><!--Higher than any of the other divs--></div>
</div>
<div id="div3 style="z-index:3">
<div><!-- any div inside div3 are higher than div1 and div2 but not div4</div>
</div>
Hello
please have a look at my jsfiddle.
The content of the inner div-element is scrollable.
Each grey symbol has a margin-left. When I scroll the content the symbols shouldn't be fixed to the background.
It should be scrollable with the position.
Have you got an idea how I achieve that effect?
Keep in mind that positioning is relative to the closest positioned parent.
When you are assigning an absolute position to the "symb" class you are positioning them relative to the document rather than their parent.
Simply adding "position: relative;" to your div.tl element will set the parent div as positioned without moving it and the "symb" elements will act the way I think you expect them to.
Your new .tl definition should be:
.tl {
width: 500x;
height: 80px;
background-color:grey;
position: relative;
}
Furthermore, I'm assuming that you have some need to position these absolutely. You could achieve similar results by simply removing the "position: absolute" portion of your .symb definition.
You are setting a margin, not a position, so you don't need to bother with positioning at all in your example case.
I am not sure what do you need. You had an error in your last "symb" - you missed 'p' in 'px'. Try this?
<div class ="outer">
<div class="inner">
<div class="tl">
<div class="box" style="width: 315px;">
<div class="symb" style="margin-left: 0px;"></div>
<div class="symb" style="margin-left: 15px;"></div>
<div class="symb" style="margin-left: 20px;"></div>
</div>
</div>
</div>
</div>
.outer {
width:50%;
}
.inner {
overflow-x:scroll;
}
.tl {
width: 500x;
height: 80px;
background-color:grey;
}
.box {
float: left;
height: 61px;
}
.box .symb {
float:left;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}
Use
position: relative;
Not
position: absolute;
Just try with the following CSS:
.box .symb {
position: relative;
float: left;
position: inline-block;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}