How can the h2 element in this sandbox be brought up above the overlay?
<h1>Hello Plunker!</h1>
<h2>Above the overlay</h2>
<div class="overlay"></div>
.overlay {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background-color: rgba(34, 34, 34, 0.8);
z-index:100;
}
h2 {
z-index:200;
}
https://plnkr.co/edit/md2lIJCbhnEcc1XAbrne?p=preview
Change the position of the element from static to relative / absolute / fixed. position: static (the default) doesn't allow z-index (demo):
h2 {
position: relative;
z-index:200;
}
If you mean that the h2 should be in front of the overlay DIV, change its CSS to:
h2 {
z-index: 200;
position: absolute;
color: white;
}
(I added the white color to make it clearer that it's not behind overlay)
Related
I HAD two divs on a page - an image and some text. Image is set to 100% width, so text stacks underneath it. No positions were set.
Then I added a title on top of my image, giving the container div a position of relative and the image and title a position of absolute.
This has caused my text that was below the image to disappear behind it. WHY?!?! I'm new to CSS and can't figure these alignments out.
CSS:
.fullwidthimage {
width: 100%;
position: relative;
float: left;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 100;
top: 50px;
width: 100%;
}
.imageundertext {
position: absolute;
}
jsfiddle here: https://jsfiddle.net/4ksbz4c2/
thanks.
Use "z-index" in your css.
If the image is fixed, I would set it as a background-image instead.
https://jsfiddle.net/4ksbz4c2/1/
.fullwidthimage {
height:100vh;
width:100vw;
position:fixed;
top:0;
left:0;
z-index:-1;
text-align:center;
}
.fullwidthimage img {
z-index:-1;
position:fixed;
top:0;
left:0;
}
.fullwidthimage h1 {
z-index:1;
}
I want to have an overlay over my image background, in order to see the white text above the image more clearly.
Why won't this solution work ?
HTML:
<div id="myDiv" class="bg1 image-cover">
<p>H</p>
</div>
CSS:
#myDiv {
width: 300px;
height: 300px;
color: #fff;
position: relative;
font-size: 100px;
font-weight: bold;
}
.image-cover:before {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
.bg1 {
background-size: cover;
background: url('https://2zpt4dwruy922flhqyznip50-wpengine.netdna-ssl.com/wp-content/uploads/2014/12/lock-and-stock-photos.jpg');
}
while this one does:
HTML:
<div id="myDiv" class="bg1">
<div class="image-cover">
<p>H</p>
</div>
</div>
CSS:
...
.image-cover {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
...
I think I am misunderstanding the way :before works, but I am not fan of the second solution as it has one more div than the first.
I'm glad you're already aware of the second solution; this tends to be the approach I normally use (though not for any particular reason). You can simply modify your original approach as follows and get the desired effect:
#myDiv > p {
position: relative;
}
Namely, give the nested <p> tag a non-static position value. See here: CodePen
You can just increase the z-index of the text which is to be overlaid over the image like this:
#myDiv{
z-index: 1;
}
#myDiv p{
z-index: 2; /* should be more than the z-index of the background */
}
I'm trying to put an image and its description at the bottom of the image (and over the image with the opacity 0.8). Both the elements are inside a div element. But enable display the title.
.title {
opacity:0.8;
background-color:black;
color:white;
height:40px;
width:100%;
position:relative;
bottom:0px;
z-index:2;
clear:both;
}
.tilebg {
position:relative;
top:0px;
height:100%;
z-index:0;
opacity:1;
}
I've made a fiddle with example
Here's how positioning works:
position:relative - this sets the current element as the origin point (0,0)
position:absolute - this sets the position of an element in respect to its origin. If the parent has position:relative, that becomes the origin. Otherwise, it goes up the HTML tree until it finds one, defaulting to BODY if none is defined.
So: parent = relative, child = absolute
.item {
opacity:1;
background-color:grey;
margin:20px;
margin-left:20px;
width:200px;
height:200px;
position:relative;
background-image:url(http://i.imgur.com/vdDQgb.jpg);
}
.title {
opacity:0.8;
background-color:black;
color:white;
height:40px;
width:100%;
position:absolute;
bottom:0px;
z-index:2;
clear:both;
font-size:12px;
}
I would encourage you to use the new figure and figcaption elements since they were created for this very purpose:
<figure>
<img src="http://placekitten.com/300/200" />
<figcaption>This is the caption.</figcaption>
</figure>
With the following CSS:
figure {
width: 300px; height: 200px;
position: relative; /* Permits placement figcaption absolutely */
}
figcaption {
position: absolute;
bottom: 0; left: 0; width: 100%;
background: rgba(0,0,0,.8); /* Semi-transparent background */
}
Demo: http://jsfiddle.net/qu4a3/1/
I have two layer,one is black overlay:
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 0;
display: none;
}
the other is my text container:
#wrap {
z-index: 999
width:600px;
height:600px;
border:5px solid black;
display:none;
color:red;
}
I want let the overlay and the container show at the same time:
$(document).click(function () {
$('#overlay').add('#wrap').fadeIn();
})
but the text container is always under the overlay,although I have set the overlay z-index to 0 and set the container z-index to 999.
Demo is here
finally I found I have to set the overlay z-index to -1, it would work.
Why I can not set the overlay's z-index more higher?Because its position is fixed?
z-index is not applied to #wrap because it has flow positioning. A box must have at least position: relative; before z-index takes effect.
Also, your z-index value is missing its semicolon. Make it z-index: 999; and it works. My code is below:
#wrap {
z-index: 999;
width:600px;
height:600px;
border:5px solid black;
background: #FFF;
display:none;
color:red;
position: relative; }
An element with static positioning(this is the default) is unaffected by the z-index property, change its positioning to relative
Is there a simple way to style element like this?
Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.
It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)
This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.
Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.
The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to be set.
CSS:
/* main button block */
.button {
display:inline-block;
background: #f00;
position: relative;
line-height: 60px;
text-align: center;
padding: 0 20px;
height: 60px;
margin-left: 0.5em;
}
/* common background color to all */
.button, .button::before, .button::after {
background-color: #f00;
}
/* shared styles to make left and right lines */
.button::before, .button::after {
content: "";
position: absolute;
height: 50px;
width: 5px;
top: 5px;
}
/* pull the left 'line' out to the left */
.button::before {
left: -5px;
}
/* pull the right 'line' out to the right */
.button::after {
right: -5px;
}
Fiddle: http://jsfiddle.net/3R9c5/2/
How about this?
HTML:
<div class="block">(text goes here)</div>
CSS:
body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}
Edit: updated after the latest insights into the demands of the question.
You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.
e.g.:
.button {
background: #f00;
position: relative;
}
/* corner top left */
.button::after {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner top right */
.button::after {
position: absolute;
top: 0; right: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner bottom left */
/* … */
The CSS border-radius attribute
maybe this will help you. Or you can just add new class, "cadre" for example
.cadre
{
border-radius: 10px;
}
to your css file, then affect it to the div.
I don't think border-radius can accomplish that. This is the simplest way I can think of:
http://jsfiddle.net/DpLdt/
CSS:
body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}
HTML:
<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>