Say I have the following HTML:
.wrapper {
position: relative;
z-index: 99;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
z-index: 400;
}
.green {
background: green;
}
<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>
I would like the red box to appear on top of the green box. But it doesn't. The .wrapper has z-index of only 99 whereas .red has z-index: 100. Are there any hacks top produce .red on top?
Thanks in advance!
You don't want to give the wrapper thats containing both of those divs a z-index because it's containing both of those divs. Get rid of the z-index on the .wrapper. and leave the .red class a z-index of 400 and the red box will appear on top of the green one:
.wrapper {
position: relative;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
z-index: 400;
}
.green {
background: green;
}
<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>
You're setting both containers to z-index: 99. Therefore, since the z-index is the same for both, source order decides placement on the z-axis.
The .wrapper element with the green div comes last in your code, so it prevails. (Switch the order of the .wrapper elements, and the red wins out.)
The z-index: 400 on the red child is having no effect since the stacking order that matters is that of the containers.
Try this:
.wrapper:first-child {
position: relative;
z-index: 2;
}
.wrapper:last-child {
position: relative;
z-index: 1;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
}
.green {
background: green;
}
<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>
Related
I'm beginner in CSS, I can't put div after
For example :
I want to put red div after green div as the image shows:
but I want to make divs sticking to the edges of the screen .
What I tried :
.green {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: green;
margin-bottom: 5px;
}
.red {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: red;
}
<div class="green">
</div>
<div class="red">
</div>
Just declare top + bottom. To span the entire width you could also use: left + righ: 0.
To shorten the code you can also use the inset-property with a 3 value syntax:
inset: [top] [left/right] [bottom]
body {
margin: 0;
}
.green {
position: absolute;
inset: 0 0 50%;
background-color: green;
}
.red {
position: absolute;
inset: 50% 0 0;
background-color: red;
}
<div class="green">
</div>
<div class="red">
</div>
If you just write this code with relative positions I think will do the work. But following your example (where you set the position as absolute) I let you the following code. I don't know if it is what do you expect, if it isn't, please com back with more details.
.green {
position: absolute;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 50vh;
background-color: green;
margin-bottom: 5px;
}
.red {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 50vh;
background-color: red;
transform: translateY(100%);
}
<div class="green">
</div>
<div class="red">
</div>
You can use vh (viewport width) units to set height relative to the viewport.
body {
padding: 0;
margin: 0;
}
.green {
width: 100%;
height: 50vh;
background-color: green;
}
.red {
width: 100%;
height: 50vh;
background-color: red;
}
<div class="green">
</div>
<div class="red">
</div>
It is happening because red div is overlapping your green div
so just change your code into this:
.green{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: green;
margin-bottom: 5px;
}
.red {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background-color: red;
}
<div class="green"></div>
<div class="red"></div>
The big question is, what do you mean by
i want to put red div after green div
Your browser reads its given html-code from left to right and from top to bottom, until you define something different in your CSS. This means "after" can also mean an alignment of your red div on the right edge of your green div.
But all you need is basically the snippet down below.
If you want them to be align centered (like shown in your screenshot), just add "margin: 0 auto" and you good to go.
I personally can only recommend testing positioning, as a beginner, with absolute values like "px" instead of relative values like percentage. This makes it much easier to understand what's happening.
.green {
background-color: green;
height: 100px;
width: 100px;
// margin: 0 auto;
}
.red {
background-color: red;
height: 100px;
width: 100px;
// margin: 0 auto;
}
<div class="green">
</div>
<div class="red">
</div>
! of Course, if you run the code you have to remove the comment signs !
I'm trying to place text over an image (simplified as a div here) that I can blur and set other filters on, but I want that text to be relatively positioned so that the parent container can resize.
#container {
position: relative;
width: 100%;
background: red;
height: 300px; /* For display sample purposes--no height is defined in production */
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
opacity: 0.5;
}
.content {
color: white;
font-weight: bold;
font-size: 3em;
}
<div id="container">
<div class="bg"></div>
<div class="content">
asdasdasdasd
</div>
</div>
This causes the blue bg to be displayed over the content. I know that I can have the content div be also absolutely positioned, but then the container's height won't change.
How can I accomplish what I'm looking for?
Fiddle
Add following style to .content class
.content {
position: relative;
z-index: 1;
}
I think this stuff will work for you and i hope it will be helpful to you. just try it.
#main {
position: relative;
height: 200px;
width: 200px;
border: 2px solid #aaa;
text-align:center
}
#center {
position: relative;
left:25%;
top:25%;
border: 1px solid #aaa;
width: 100px;height: 100px;
text-align:center
}
div { height: 50px;width: 50px;}
.blue { background-color: lightblue; position: absolute; }
.green {background-color: lightgreen; position: absolute; right:0}
.yellow {background-color: yellow; position: absolute; right:0; bottom:0 }
.red {background-color: lightpink; position: absolute; bottom:0;}
<div id="main">
<div class="blue">blue</div>
<div class="green">green</div>
<div class="yellow">yellow</div>
<div class="red">red</div>
<div id="center">
<div class="blue">center-blue</div>
<div class="green">center-green</div>
<div class="yellow">center-yellow</div>
<div class="red">center-red</div>
</div>
</div>
<p>This is relative absolute using css.</p>
I'm trying to make a slider. My divs are #foo, #bar and #text.
#foo is the container div
#bar is a colored div inside #foo. It fills it with variable percentage width.
#text is a transparent div inside #foo (except for the text). It should be above #bar.
Something like this (image)
How can I achieve this with CSS? My code currently looks something like this:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
}
#bar {
background: green;
width: 50px;
float: left;
height: 20px;
z-index: 2;
}
#text {
z-index: 3;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
Something like this?
#slider {
width: 200px;
height: 30px;
background-color: black;
position: relative;
}
#percentage {
color: white;
line-height: 30px;
margin-left: 10px;
position: absolute;
}
#bar {
width: 75%;
height: 30px;
background-color: red;
position: absolute;
}
<div id="slider">
<div id="bar">
</div>
<div id="percentage">75%</div>
</div>
Simple make the outer box positioned relative so child elements are relative to the outer box, then position both those elements absolute inside their parent. Give the two inner boxes a position of top left. Now your z-index will work, check out this modified snippet:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
}
/* Combined these since they share a lot in common */
#bar, #text {
/* Made width and height 100% as they are relative to the parent size now */
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
#bar {
background: green;
width: 50px;
}
#text {
z-index: 1;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
The below will fill the loading bar on hover - you may wish to use jQuery for a wider range of event handlers:
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
#foo {
background: green;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
overflow: hidden;
}
#bar {
background: red;
width: 100%;
position: absolute;
left: 0;
height: 100%;
z-index: 2;
transition: left 0.5s ease-in-out;
}
#text {
z-index: 3;
position: absolute;
height: 100%;
width: 100%;
}
/* REMOVE BELOW AND EDIT #bar LEFT: VALUE FOR STATIC LOADING BAR */
#foo:hover #bar{
left: 100%;
}
I need for parent div to be over its children.
I've tried z-index set to -1 and it works for first level, but I need for two or more children depth.
div {
width: 200px;
height: 300px;
overflow: visible;
}
.one {
position: relative;
background: green;
}
.two {
position: absolute;
background: red;
top: 0;
left: 100px;
z-index: -1;
}
.three {
position: absolute;
background: blue;
top: 0;
left: 150px;
z-index: -1;
}
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
So, class One should be over Two, and Two over Three
thanks
Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.
Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.
Try like this
div {
width: 200px;
height: 300px;
overflow: visible;
}
.one {
position: absolute;
background: green;
z-index:2;
}
.two {
position: absolute;
background: red;
top: 50px;
left: 100px;
z-index: 1;
}
.three {
position: absolute;
background: blue;
top: 100px;
left: 150px;
}
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
Why is the red div in front of the green div when I remove z-index from .wrapperRed?
It feels like z-index is inherited up the chain.
If I change the z-index of the green div to 6, it stays in front of the red one even after removing the line described in the first sentence.
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}
.red {
position: absolute;
height: 100%;
width: 100%;
background-color: red;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="red"></div>
</div>
<div class="green"></div>
When you remove z-index from .wrapperRed, the element defaults to z-index: auto.
In this case, both .red and .green participate in the same stacking context because positioned elements do not create a stacking context when z-index is auto (reference).
Learn more about z-index and stacking contexts here: Basics of the CSS z-index property
Why is the .red div in front of the green div when I remove z-index
from .wrapperRed?
Because .red no longer has a parental z-index to constrain it.
ie.
Before: .red has a z-index of 5 within a parental z-index of 1.
After: .red has a global z-index of 5.
N.B. In both Before and After cases, .wrapperRed is always behind .green. But, when it is unconstrained, .red (which is 100% the width and height of .wrapperRed) appears in front of .green.
You can see this more easily if you give the parent and child divs different background colours and make the child div smaller than the parent.
Compare:
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
background-color: red;
z-index: 1;
}
.yellow {
position: absolute;
height: 75%;
width: 75%;
background-color: yellow;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="yellow">
</div>
</div>
<div class="green"></div>
with:
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
background-color: red;
}
.yellow {
position: absolute;
height: 75%;
width: 75%;
background-color: yellow;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="yellow">
</div>
</div>
<div class="green"></div>