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
Related
I am trying to create an overlay with the following html and css
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 50%;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
opacity: 1;
background-color: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.95);
color: white;
z-index: 1;
}
.div1 {
animation: 750ms 1 forwards ani;
}
#keyframes ani {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h2>
position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">
This div element has position: relative;
<div class="div1">
This is a div
<div class="overlay">
This div element has position: fixed;
</div>
</div>
<div class="absolute">
This div element has position: absolute;
</div>
</div>
I am trying to create an overlay which is supposed to cover the entire area. However, the problem is, when I add animation it brings the absolute element to the front despite the fact that the animation has not been applied to it
move your fixed element to the bottom, something like this
<div class="relative">
This div element has position: relative;
<div class="div1">
This is a div
</div>
<div class="absolute">
This div element has position: absolute;
</div>
</div>
<div class="overlay">
This div element has position: fixed;
</div>
Since my last answer isn't the best practice, try this one.
So add these style to the div with class div1:
.div1 {
animation: 750ms 1 forwards ani;
position: relative;
z-index: 2;
}
z-index didn't work because the positioned absolute element is on a different level than the fixed element, you need to define the z-index of the same level of element (in this case div1 and absolute). z-index also needs to have position relative attribute for it to work..
(To everyone looking for an answer) I found out the problem with this code. When we apply opacity animation with values less than 1 it creates another stacking context for that particular element and its children and it was stacking the overlay with respect to that stacking context. I solved it by removing animation-fill-mode to none since it won't affect any CSS afterwards.
<div class="shouldBeOverlapped">
content
</div>
now I want to add another div on it (e.g. waiting) so it will 100% cover it and make it unclickable, preferably transparented. How to do it?
Try to search for "overlay". This will be the right thing.
Example here:
#overlay {
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
<div class="shouldBeOverlapped">
content
</div>
<div id="overlay"></div>
You can try to put that waiting div as a :before. Although it is limited, it can be easy to set up.
#textToHide {
background: yellow;
position: relative;
width: 300px;
padding: 10px;
}
#textToHide:before {
content: '';
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div id="textToHide">
This text is protected against selection... although we could still look for it in the source code...
</div>
You need a containing div element with it's position attribute set to relative. This defines the bounds of the overlay. Without it the overlay will look up the DOM until it finds a parent it can get it's positioning information from. If it doesn't find one, it will cover the entire page body.
I've created a JSFiddle for you here: https://jsfiddle.net/aogd164t/
Try removing position: relative from the container class and see the result.
I know that similar questions have been asked before but I've tried all the solutions I could find (which involve position:relative on the outer div and position: absolute on the inner divs) but I can't for the life of me get the red div to align underneath the green one rather than stacking on top of it.
HTML:
<body>
<div id="outer_div">
<div id="title_div">
</div>
<div id="main_div">
</div>
</div>
</body/>
CSS:
body {
height: 1000px;
width: 1000px;
margin: 0;
padding: 0;
}
#outer_div {
position: relative;
height: 100%;
width: 100%;
background-color: blue;
display: block;
}
#title_div {
top: 0;
left: 0;
position: absolute;
height: 25%;
width: 100%;
background-color: green;
display: block;
}
#main_div {
top: 0;
left: 0;
position: absolute;
height: 20%;
width: 100%;
background-color: red;
display: block;
}
Here's the jsFiddle link.
Thanks!
To get the red div to display beneath the green div, do the following
Remove "position: absolute;" from #main_div and #title_div
Add "float: left;" to #main_div and #title_div
This will cause each div to pull itself as far left as possible. If it won't fit both of them side by side, the second one automatically is pushed below the first.
You have the same absolute top position for both the inner divs. There are many ways to change this including allows natural ordering of divs, changing the top position etc.
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
JSFiddle:
JSFiddle of the issue
I'm having a bit of trouble wrapping my head around z-index with relatively positioned elements. Given this html I want the 'active' screen-component to be in front of the other two (yes I know this visually doesn't look good in this example... I've boiled down the problem to the basics):
<div class="parent-container">
<div class="screen-component">
Content inside first screen component
</div>
<div class="screen-component">
Content inside second screen component
</div>
<div class="screen-component active">
Content inside active component.. I want this up top
</div>
</div>
And this css:
.parent-container {
position: relative;
}
.screen-component {
position: relative;
z-index: 2000;
}
.screen-component.active {
position: relative;
z-index: 5000;
}
The desired effect I want is any 'screen-component' with the 'active' class to be positioned in front of the other ones; however right now they all seem to be given new lines, despite the .active class having a z-index higher than the .screen-component class
I think you want something like this:
http://jsfiddle.net/ZCBXA/3/
(The background colors are just for demonstration purposes)
.parent-container {
position: relative;
}
.screen-component {
position: absolute;
z-index: 2000;
top:0px;
left:0px;
background-color: #f00;
}
.active {
z-index: 5000;
background-color: #0f0;
}
If I'm understanding what you're trying to do correctly, you need position: absolute; not position: relative;. Then give the div class a top value so that all divs with that class are the same distance from the top, and a z-index of -1 to hide them. The only thing the active class needs is a higher z-index than the others.
.parent-container {
position: relative;
}
.screen-component {
position: absolute;
top:0;
z-index: -1;
}
.screen-component.active {
z-index: 0;
}