I got two absolute elements with the same z-index.
One of them has a fixed-position child which has an higher z-index than the parent.
Why the child only overlaps the parent but not the other absolute element with a lower z-index.
How to achieve that the child overlaps both lower z-index elements?
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
z-index: 10;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: 20;
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
<div class="higher-element">
</div>
</div>
<div class="lower-element lower-element-1">
</div>
position: fixed and position: absolute only usable with the top, bottom, left or right values.
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
z-index: 10;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: 20;
top:5em; /* I added */
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
<div class="higher-element">
</div>
</div>
<div class="lower-element lower-element-1">
</div>
By making .higher-element to be siblings with .lower-element, then set .higher-element with z-index: -1
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
z-index: 10;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: -1;
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
</div>
<div class="higher-element">
</div>
<div class="lower-element lower-element-1">
</div>
Remove all your z-index and add only to .higher-element : z-index: -1;
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: -1;
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
<div class="higher-element">
</div>
</div>
<div class="lower-element lower-element-1">
</div>
Related
I have two div elements.
<div class="container">
<div class="card">...card container...</div>
<div class="effect-background">...effect container...</div>
</div>
and here are styles of them
.card {
width: 500px;
height: 500px;
z-index: 10;
}
.card:hover {
...CARD HOVER STYLES...
}
.effect-background{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.effect-background:hover {
...BACKGROUND HOVER STYLES...
}
but BACKGROUND HOVER STYLES doesn't work when hovering on card div.
I know pointer-events: none; CSS but I want to keep CARD HOVER STYLES at the same time.
Is it possible?
Use: .card:hover + .effect-background. You can read more about selectors here.
Hope it helped :)
.card {
position: absolute;
left: 40vw;
top: 40vh;
width: 20vw;
height: 20vh;
z-index: 10;
background-color: yellow;
}
.card:hover {
background-color: yellowgreen;
}
.effect-background{
position: absolute;
background-color: red;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.card:hover + .effect-background {
background-color: pink;}
<div class="container">
<div class="card">...card container...</div>
<div class="effect-background">...effect container...</div>
</div>
I am trying to align a fixed div to the bottom inside another fixed div. I have seen on stackoverflow that we can use an absolute div as a wrapper to position a fixed div
Here levelTwo div is fixed and wrapper levelTemp is absolute to align the fixed child div to the bottom and levelThree is the fixed child div.
The expected output for me should be like this:
but it is like this:
Solution 1:
One way is to specify height of the levelTemp div of 50px but in my case the height of levelThree div can vary.
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: fixed;
right: 0;
}
.levelTemp {
position: absolute;
bottom: 0;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: fixed;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
Using position:fixed
body {
margin: 0;
}
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: fixed;
right: 0;
}
.levelTemp {
position: absolute;
bottom: 0;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: fixed;
top: 100px;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
using position:absolute;
body {
margin: 0;
}
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: absolute;
right: 0;
}
.levelTemp {
position: relative;
height: 100%;
width: 100%;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 0;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
This is what you want?
.levelTemp {
/* bottom: 0; */
/* overflow: hidden; */
bottom: 0;
position: absolute;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
/* position: fixed; */
/* bottom: 0; */
}
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%;
}
How can I insert an element between and its child and its grandson?
I have a markup like this:
<div id="main">
<div id="img-container">
<img id="img">
</div>
</div>
And the styles are:
#main {
margin-top: 300px;
position: relative;
z-index: 1;
}
#img-container {
margin-top: -150px;
position: relative;
z-index: 0;
}
#img {
display: block;
position: relative;
z-index: 2;
}
Now the order must be
img-container
main
img
How it works now:
How it is expected to work:
(Thanks to #ralph.m for images)
You can really just get that visual effect without having to reorder layers etc. You can reverse the styles on those elements to get that appearance. Or you could do something even simpler like this:
#main {
position: relative;
background: #e7e7e7;
width: 600px;
padding: 0 50px;
margin: 50px;
}
#main::after {
content: '';
width: 500px;
height: 200px;
position: absolute;
z-index: -1;
left:50%;
margin-left: -250px;
top: -50px;
background: #30353b;
}
#img-container {
position: relative;
width: 400px;
top: -20px;
margin: 0 auto;
}
<div id="main">
<div id="img-container">
<img src="https://unsplash.it/400/200">
</div>
</div>
Question isn't clear, but are you just looking for something like this? (It basically involves replacing margin-top with top on the img-container.)
#main {
margin-top: 100px;
position: relative;
z-index: 1;
background: #e7e7e7;
width: 500px;
padding: 0 40px;
}
#img-container {
top: -50px;
position: relative;
z-index: 0;
background: #30373b;
width: 400px;
padding: 40px;
}
#img {
display: block;
position: relative;
z-index: 2;
}
<div id="main">
<div id="img-container">
<img id="img" src="https://unsplash.it/400/200">
</div>
</div>
I'm trying to create some static content using a div with position: fixed and then allow a solid div with a background-color to scroll over it and hide the static text below.
HTML:
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
CSS:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
But the yellow div just shows the text through from the fixed background.
Why is this?
By setting z-index: -1; in .static-background i get the desired behaviour, except that the link is no longer clickable and the text is not selectable.
How do I make the background of .overlay hide the fixed elements behind while still allowing interaction (until hidden)?
Fiddle here.
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
When you give the element .static-background a negative z-index, it is being placed behind the parent .container element, which is why the element is unclickable.
To work arond this, you need to give the parent element, .container, a z-index to establish a stacking context between the elements.
In this case, you can simply give it a z-index of 1.
Updated Example
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Added */
}
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.static-background {
position: fixed;
z-index: -1;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Some text</p>
<p>this should be clickable</p>
</div>
<div class="overlay"></div>
</div>
As an alternative, you could also just give the element .overlay a z-index of 1, and remove the z-indexs from the other elements. (example)
You might want to add some z-index to your elements:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index: 99;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
position: relative;
z-index: 100;
}
Change your css to this...
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index:4;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
z-index:5;
position:relative;
}
Working JSFiddle http://jsfiddle.net/DivakarDass/mcdbopj6/3/