I've something like the following css:
#one{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
#two{
position: relative;
z-index: 9;
width: 200px;
height: 200px;
background: red;
}
#link{
position: relative;
z-index: 9999999; /*this is not in higher layer why??? */
}
I cannot increase the z-index of #two as per my design.
But I've assigned higher z-index to the #link but it's not getting in higher layer.
So, why the position fixed is blocking to the layer (z-index) ?
jsfiddle
If the position of #one wasn't positioned fixed then it would work fine. So, my question is why position fixed is giving me a bug?
Why the position fixed is blocking to the layer (z-index) ?
This is because of The stacking context. CSS positioning and adding a z-index value to an element creates a new stacking context.
From MDN page:
Note: The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements.
Hence in your particular case:
<div id="one">
<div id="overlay"></div>
</div>
<div id="two">
test
</div>
The hierarchy of stacking contexts would be:
Root
#one
#two
#link
And #link would be placed under the #one no matter how much its z-index value is.
One option is increasing the z-index value of #two element (more than #one).
Do you want the link hover #two?
something like that?
#one{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
#two{
position: relative;
z-index: 2;
width: 200px;
height: 200px;
background: red;
}
#link{
position: relative;
z-index: 9999999;
}
http://jsfiddle.net/0q84xq87/1/
You need to add z-index to wrapper div
#two{
position: relative;
z-index: 9;
width: 200px;
height: 200px;
background: red;
z-index: 9999;
}
#link{
position: relative;
}
Because #link's z-index is relative to #two's (which is #link's parent) z-index then #one's and #two's z-index are relative to their parent(in this case body).
Related
I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
Update: it's a Chrome-only bug, as Josh Crozier figured it out.
Resize the window vertically, to see why the code below does not work. The child element does not stay at the bottom of the parent. Why?
header {
background: red;
height: 50%;
left: 0;
position: fixed;
width: 300px;
}
header div {
bottom: 0;
position: absolute;
}
<header>
<div>Lorem</div>
</header>
This is currently a Chrome bug (as of version 47 and maybe earlier versions).
It only seems to apply to elements with fixed positioning. The issue is that the elements are repainted/rending incorrectly when resizing or scrolling. It's worth pointing out that the elements are definitely repainted/rendered, but it seems like they are rendered relative to their initial position when the DOM loaded.
This behavior is likely related to issues 454216, 153738, and 20574.
One work-around would be to wrap the element and absolutely position it relative to the parent element with the same height as the header ancestor element:
header {
height: 50%;
left: 0;
position: fixed;
width: 100%;
}
header .wrapper {
background: red;
height: 100%;
width: 300px;
position: relative;
}
header .wrapper > div {
bottom: 0;
position: absolute;
}
<header>
<div class="wrapper">
<div>Lorem</div>
</div>
</header>
Because <h1> has its own margin. Try
header h1 {
bottom: 0;
position: absolute;
margin-bottom: 0;
}
I'm a newbie in HTML and on my page, I have the problem that my two sections aren't continuous:
.privitanie{
position: absolute;
background: url("../images/pozadie.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
top: 0;
z-index: 0;
}
.uvod{
position: relative;
z-index: 0;
height: 100%;
}
<section class="privitanie" id="privitanie">...</section>
<section class="uvod" id="uvod">...</section>
Absolutely-positioned elements are outside the document flow. Other elements end up layered above or below, depending on their position in the markup. Make both relative, or give .uvod a top margin equal to the height of .privitanie.
Here's an easy solution that does not require changing too much of your code:
.uvod{
position: relative;
margin-top: 50%;
z-index: 0;
height: 100%;
}
Change margin-top to whatever you prefer.
I have a div with a background image that should be covered with a mask effect. On that div should be some content. I'm trying to get the content to be over the mask but for some reason it isn't working.
I added a jsFiddle:
http://jsfiddle.net/FHt9d/
Here is the code:
Html:
<div id="container">
<div id="mask"></div>
<div id="content"><h1>This is a header</h1></div>
</div>
Css
#container
{
width: 100%;
height: 246px;
position: relative;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d8/Skyline_oklahoma_city.JPG')
}
#mask
{
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(75,139,228,.8);
position: absolute;
top: 0;
left: 0;
}
#content h1
{
z-index:2;
font-size: 32;
color: #fff;
}
The text should not be covered by the mask. Any help would be greatly appreciated,
Thanks!
try this (you missed a position: relative;):
#content h1 {
color: #FFFFFF;
position: relative; //missed
z-index: 2;
}
The elements that have
position: absolute
are always on top. Same thing applies to
position: fixed;
They always float above the elements in a browser.
To minimize this, you use
z-index: value;
For the elements with position value set, you can use:
z-index: 1;
and change it for the element you want to be above others
z-index: 2; /* or more than 2 */
This will do the job.
You missed a position: relative; on the #content h1. Indeed, z-index applies only on positionned elements.
I have a parent div which has its position as fixed. What i'm trying to do is to get the child div1 to stand out when I blur the page but the entire parent div stands out. After having read a lot of posts which said that the parent div overrides the z-index and the child's z-index has no meaning, I'm stuck here not knowing how to make this work.
If not getting this to work, can anyone help me with a solution for this?
This is easily achievable when you don't actually contain the intended children in the parent element, but instead fake hierarchy visually while keeping the DOM layout flat. A sample is built below:
http://jsfiddle.net/4KLRU/1/
HTML:
<div id="container">
<div class="child">Something</div>
<div class="child behind_parent">Something else</div>
<div class="child">Something else entirely</div>
<div id="parent"></div>
</div>
Notice that the parent element isn't actually around the so-called children elements.
CSS:
#container {
position: fixed;
padding: 10px;
}
#parent {
background: orange;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.child {
position: relative;
background: red;
margin: 5px;
z-index: 2;
}
.behind_parent {
z-index: 0;
}
Without knowing exactly what your markup looks like, you could try the following approach:
#parent {
position: fixed;
...
}
#child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
...
}