I can't for the life of me figure out how to get the red on top without changing the html structure.
http://jsfiddle.net/GSBtG/
How do I get the red on top? I've red every combination of z-index values and position, etc.
The HTML:
<div id="red">
<div id="green"></div>
</div>
The CSS:
div {
width: 300px;
height: 300px
}
#red {
background: red;
z-index: 10;
position: relative;
}
#green {
background: green;
width: 290px;
z-index: -10
}
Remove the Z-Index from the parenting element and give both elements the same position: rule.
Proof of concept: http://jsfiddle.net/GSBtG/2/#update
Set a negative z-index on the child and remove the z-index on the parent.
#parent {
position: relative;
}
#child {
position: relative;
z-index: -10;
}
jsFiddle
Source
Related
I write css coded is the following lines. but not working z-index.
I want to know how I can make the z-index work while keeping the value of position as relative.
#foo {
position: relative;
z-index: -1;
width: 100%;
height: 30%;
background-color: lightblue;
}
#bar {
width: 50%;
height: 30%;
background-color: lightpink;
}
As far as I know, if you set the value of position to a non-static value, the z-index should work. Are there any other factors that affect the z-index?
Also if I change the value of position to absolute it works fine.
When position is relative
When position is absolute
everything is working as you need you can see I have added margin-bottom:-20px; to .foo so that you can se that in effect that .foo is behind .bar.
Understand that position won't take item out of flow, which will keep it at it's position. To see this in effect there must be some overlapping between two elements, than you can see the z-index in efffect.
html,
body {
width: 100%;
height: 100%;
}
#foo {
position: relative;
z-index: -1;
width: 100%;
height: 30%;
background-color: lightblue;
margin-bottom: -20px;
}
#bar {
width: 50%;
height: 30%;
background-color: lightpink;
}
<div id="foo">Foo</div>
<div id="bar">Bar</div>
I have a div element wrapping other div elements like so:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
What is the best way to achieve this?
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.
.outer-container {
position: relative;
height: 50px;
}
.container {
background: gray;
overflow: hidden;
height: 50px;
}
#a,
#b {
height: 100px;
width: 100%;
}
#a {
background: green;
position: absolute;
top: 60px;
}
#b {
background: red;
font-size: 60px;
}
<div class="outer-container">
<div class="container">
<div id="a"></div>
<div id="b">Cut off</div>
</div>
</div>
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
breakOverflow($('#exlude-me'));
having a general css issue while creating a page with animations. I have a main container that's positioned relative and more than one container that's absolute positioned within that for the purpose of changing the background styles like color of the whole page and shifting it around to reveal the other containers of different colors under it via z-index.
why doesn't the background color show up?
.main {
position: relative;
}
.bg {
position: absolute;
width: 100%;
height: 100%;
}
.green {
background: green;
z-index: 5;
left: 50%;
}
.blue {
background: blue;
z-index: 4;
}
<div class="main">
<div class="bg green">green</div>
<div class="bg blue">blue</div>
</div>
When you position something as absolute, it is removed from the document flow. This means that now main has nothing to give it any height (since the default is auto), and so therefore the children's height: 100% is still 0. The text is still visible because the default of overflow-y is visible.
To fix it, give main some height.
body, html, .main { height: 100% }
.main {
position: relative;
}
.bg {
position: absolute;
width: 100%;
height: 100%;
}
.green {
background: green;
z-index: 5;
left: 50%;
}
.blue {
background: blue;
z-index: 4;
}
<div class="main">
<div class="bg green">green</div>
<div class="bg blue">blue</div>
</div>
please, is there any way, to show child over parents overlay?
What I want to achieve - I have div #wrapper, which has overlay with some color but I want to show one of its childs elements over this overlay. It means -> over #wrapper, there will be white transparent overlay and over overlay there will be #wrappers childs.
I have this code:
<div id="wrapper">
<div class="overlay-visible"></div>
</div>
Css:
#wrapper {
position: relative;
}
#wrapper::before{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
display: block;
content: "";
}
#wrapper .overlay-visible {
position: relative;
z-index: 999;
}
Thank you very much for your answers.
With the z-index property. The z-index property specifies the stack order of an element.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
My code looks like this:
css:
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: -100;
}
.bar {
position: relative;
z-index: -200;
width: 100%
height: 100px;
}
.inner-bar {
position: relative;
z-index: 100;
width: 100%
height: 50px;
}
html:
<body>
<div class="top">some content</div>
<div class="bar">
<div class="inner-bar">some content</div>
<div>
</body>
As you can see I am trying to make inner-bar appear in front but this does not work. Once I set bar to be behind of everything ( which works) this also sets inner-bar to be behind of everything no mater what styling I do for inner-bar. My layout requires that inner-bar must be a child of bar. So is there a solution and what it is?
To make it clear my objective is to make bar behind top (content in top appears on bar) and to make top behind inner-bar ( content in top is hidden if it overlaps inner-bar so that the links in inner-bar are active).
first off there is an error in the html you posted:
<body>
<div class="top">some content</div>
<div class="bar">
<div class="inner-bar">some content</div>
</div>
</body>
you didn't close the last div :)
as for the rest:
here you go good sir! http://jsfiddle.net/8AJnD/31/
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
top:0;left:0;z-index:0;
}
.bar {
position: absolute;z-index:-1;
width: 100%;
height: 100px;top:0;left:0
}
.inner-bar {
position: absolute;
z-index:-2;
width: 100%
height: 50px;top:0;left:0
}
Use absolute instead of relative and make the parent relative to be able to position the elements however you want them to be positioned
Negative z-index values have strange behavior. I don't believe that they work in "layers" like you would expect, rather they all wind up on the same "layer". Try using positive z-index values instead:
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: 1;
}
.bar {
position: relative;
z-index: 2;
width: 100%
height: 100px;
}
.inner-bar {
position: relative;
z-index: 3;
width: 100%
height: 50px;
}