This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
How does z-index work with its default values?
(1 answer)
All About.... Z-Index?
(4 answers)
How does the z-index property really work?
(5 answers)
Closed 1 year ago.
I try to learn how to use pseudo elements in CSS and I am facing a problem. I try to create a container that contains some text and a pseudo element.
But I wan't the pseudo element to be behind the elements text but before the background color. I don't know how to achieve this.
I want the pseudo element to be part of and before the background color. But to be behind the containers actual content.
Here is a short snippet of the exact problem I am facing:
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
<div class="container">
<h1>This is a title</h1>
</div>
Just set z-index to childs of container.
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
.container>* {
position: relative;
z-index: 2;
}
<div class="container">
<h1>This is a title</h1>
</div>
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
How to get a child element to show behind (lower z-index) than its parent? [duplicate]
(7 answers)
Closed 3 years ago.
The Green span text should be over the blue box.
I don't know why it is not working, even z-index for Green span is higher than the blue box.
.green, .blue {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
height: 100px;
text-align: center;
}
.green {
top: 60px;
left: 60px;
background: green;
z-index: 1;
}
.green span {
z-index: 3;
}
.blue {
top: 100px;
left: 100px;
background: blue;
z-index: 2;
}
<div class="green">
<span>Green</span>
</div>
<div class="blue">
<span>Blue</span>
</div>
Expected result is below;
How can I make Green span is over the blue box?
This question already has answers here:
Why does stacking order change on webkit filter hover?
(1 answer)
Which CSS properties create a stacking context?
(1 answer)
Closed 4 years ago.
I have a set of menu items which are link inside wrappers. Some links are supposed to be disabled at some point of time: they are grayed out and not clickable. To keep UI generation the same I decided to go with CSS-only solution which is quite simple: create a absolutely positioned ::before element which covers entire menu item with a semi-transparent black background.
This works fine until block inside link tag has filter applied. It makes nested content to appear on top of pseudo-element. Applying z-index on ::before element solves the issue however I am wondering about filter behaviour. Why does it happen?
.link {
width: 240px;
height: 30px;
line-height: 30px;
text-align: center;
margin-bottom: 10px;
background-color: cyan;
position: relative;
}
.link.disabled::before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top : 0;
background-color: rgba(0,0,0,0.5);
}
.link.disabled.z-index::before {
z-index: 1;
}
.link > a {
width: 100%;
height: 100%;
display: block;
color: #fff;
}
.filter {
filter: grayscale(1);
}
<div class="link disabled">
<a href="normal">
<div>Normal</div>
</a>
</div>
<div class="link disabled">
<a href="filter">
<div class="filter">With filter</div>
</a>
</div>
<div class="link disabled z-index">
<a href="filter-z-index">
<div class="filter">With filter + z-index</div>
</a>
</div>
This question already has answers here:
Border length smaller than div width?
(13 answers)
Closed 6 years ago.
I need help on border-bottom length. I want to set border-bottom length to 60%. I can do it using the inner div like:
#myDiv {
background: #FED;
_border-bottom: 5px solid red;
}
#myDiv div {
margin: 5px 0px;
width: 60%;
height: 5px;
background-color: red;
}
<div id="myDiv">
My div
<div></div>
</div>
But i don't want to use it with extra div, I want to achieve it using border-bottom, I search for this in google and stack but no luck.
Thanks in advance.
You can use pseudo element like this:
#myDiv {
background: #FED;
position: relative;
}
#myDiv::after {
content: "";
width: 60%;
height: 5px;
background: red;
position: absolute;
bottom: -5px;
left: 0;
}
<div id="myDiv">
My div
</div>
This question already has answers here:
CSS overflow hidden with absolute position
(3 answers)
Closed 8 years ago.
Why my div positioned as absolute didn't get out of the flow and get hidden by a mom div her overflow set to hidden ?
How can i show my div positioned to absolute ?
here's a FIDDLE
HTML :
<div class="div1">
<div class="div2">
<div class="div3">ccccc</div>
</div>
</div>
CSS :
.div1 {
overflow: hidden;
width: 60px;
height: 20px;
background-color: antiquewhite;
}
.div2 {
position: relative;
}
.div3 {
position: absolute;
right: -10px;
}
Your problem is with your "div3" class.
Try this:
.div3 {
position: absolute;
}
That should fit nicely.
Now if you want it to be centered, then just go:
.div3 {
position: absolute;
width: 100%;
text-align: center;
}
EDIT:
If you insist, then the easiest will be to have a counter on the same element. Try this then:
.div3 {
position: absolute;
right: -10px;
padding-right: 10px;
}
Hope this helps.
Please see http://jsfiddle.net/ZWw3Z/
<p>Text text text text text text text...</p>
p {
background-color: blue;
}
p:before {
content: '';
position: absolute;
width: 10px;
height: 100%;
background-color: red;
}
Essentially, the height of the pseudo element is too big. I want it to have the same height as the p element. How can I do that?
To future readers, the effect was to have a bar appear over text on the left-hand side. To accomplish this, the OP was using position: absolute; on the psuedo element (p:before).
The error OP was encountering was because the psuedo-element was treating the <body> as it's relative position point - to fix, simply set position: relative; on the <p> tag.
p {
position: relative;
background-color: blue;
padding-left: 10px;
/* change the padding to something larger
than the width of the :before element to
add spacing for text
*/
}
p:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 100%;
background-color: red;
}
<p>text... text...</p>