I have looked at other answers but was not able to specifically find an example. If i am using a :before or :after pseudo element as an overlay with an absolute position, is it possible to change the z-index of elements inside the parent container to bring them above the overlay. I have created a basic example, any help would be much appreciated as having a hard time understanding how to get the z-index to work correctly in this situation:
Example of the structure would be as follows:
<div class="page-banner">
<div class="container">
<h2 class="page-title">Shop</h2>
</div>
CSS as follows:
.page-banner {
position: relative;
z-index: 1;
height: 100%;
background-image: url('http://placehold.it/1920x500'); background-size: cover;
}
.page-banner .page-title {
z-index: 150;
}
.page-banner:after {
position: absolute;
left: 0;
content:"";
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
height: 100%;
z-index: 1;
}
http://jsfiddle.net/webidia/co9u3vqa/1/
Set negative z-index to :after to put in under inner elements (.page-title).
.page-banner:after {z-index: -1}
http://jsfiddle.net/co9u3vqa/5/
Related
Consider:
<div class="my-class">
AAA
</div>
I am trying to only skew the shadow, but not the content of the div by putting the shadow into the pseudo-element:
.my-class {
height: 5rem;
width: 10rem;
&::before {
content: "";
box-shadow: 0.2em -0.4rem 0 -0em rgba(0,0,0,0.6);
transform: skew(0, 25deg);
}
}
The example appears in jsbin.
I am obviously misunderstanding something about pseudo-elements, because the shadow doesn't even appear. What am I missing and how can this code be fixed to skew the shadow, but not the text?
There are a couple of things. The pseudo element needs width and height - and the snippet below assumes those are to be the same as its 'owning' element.
Also, where is the element to be placed? This snippet assumes that what is wanted is the shadow skewed but as if it were otherwise the shadow on the main element so it positions it absolutely relative to the main element. Obviously change this if I've misunderstood.
.my-class {
height: 5rem;
width: 10rem;
position: relative;
}
.my-class::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0.2em -0.4rem 0 -0em rgba(0, 0, 0, 0.6);
transform: skew(0, 25deg);
}
}
<div class="my-class">
AAA
</div>
I have a problem. In Firefox - Pseudo element with position: fixed in tag button not cover that button.
Example
<button class='test'>lalal</button>
.test {
position: relative;
}
.test::after {
content: '';
position: fixed;
cursor: pointer;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
https://jsfiddle.net/xt9eLb8z/4/
Don't use position:fixed use position:absolute.
With position:fixed the element is related to and sized with the viewport and not the parent element.
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
MDN
.test::after {
content: '';
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.test {
position: relative;
}
<button class='test'>lalal</button>
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;
...
}
I'm struggling to make this render right in my browser (Chrome). I have a wrapper holding all the elements of the HTML, and I want to have a DIV (lets call it div-1) that hold a image, and has a overlay div on top of it to the left, like I sketched in this picture...any quick solutions?
Here's a pure CSS solution, similar to DarkBee's answer, but without the need for an extra .wrapper div:
.dimmed {
position: relative;
}
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
I'm using rgba here, but of course you can use other transparency methods if you like.
Using CSS3 you don't need to make your own image with the transparency.
Just have a div with the following
position:absolute;
left:0;
background: rgba(255,255,255,.5);
The last parameter in background (.5) is the level of transparency (a higher number is more opaque).
Example Fiddle
.foo {
position : relative;
}
.foo .wrapper {
background-image : url('semi-trans.png');
z-index : 10;
position : absolute;
top : 0;
left : 0;
}
<div class="foo">
<img src="example.png" />
<div class="wrapper"> </div>
</div>
For a div-Element you could just set the opacity via a class to enable or disable the effect.
.mute-all {
opacity: 0.4;
}
Like the answer previous, but I'd put ::before, just for stacking purposes. If you want to include text over the overlay (a common use case), using ::before will should fix that.
.dimmed {
position: relative;
}
.dimmed:before {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}