This question already has answers here:
Rounded highlighter marker effect in CSS
(2 answers)
Curved end of border-bottom in CSS
(4 answers)
Closed last year.
So when I say border - i mean as in border-bottom: 10px solid red - so I can make this no longer a rectangle, but a rounded rectangle?
.item {
border-bottom: 10px solid red;
width: 100%;
height: 50px;
float: left;
display: block;
}
<div class="item">This is a div</div>
Don't use a border on the element itself. You can't make just the bottom border into a rounded rectangle, using things like border-radius will only round the bottom corners of the bottom border.
Instead, use the ::after pseudo element:
.item {
width: 100%;
height: 50px;
float: left;
display: block;
position: relative;
}
.item::after {
content: " ";
display: block;
width: 100%;
height: 10px;
background: #f00;
border-radius: 5px;
position: absolute;
bottom: 0;
}
<div class="item">This is a div</div>
This question already has an answer here:
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
(1 answer)
Closed last year.
Here is the first example. This works fine. Here .b occupies 50% of the height of .a.
.a {
background: orange;
height: 200px;
padding: 10px;
}
.b {
background: lightblue;
border: 5px solid blue;
height: 50%;
}
<div class="a">
<div class="b">
</div>
</div>
Here is the second example. It is pretty much the same except that min-height is used to set the height of .a instead of using height.
.a {
background: orange;
min-height: 200px;
padding: 10px;
}
.b {
background: lightblue;
border: 5px solid blue;
height: 50%;
}
<div class="a">
<div class="b">
</div>
</div>
But in this second example, the blue box almost vanishes. It is not 50% the height of .a anymore. Why does this issue happen? How to fix it while using min-height for .a?
Incredible I had never seen this case actually, the tricks I would see would be:
.a {
position: relative;
background: orange;
min-height: 200px;
padding: 10px;
}
.b {
position: absolute;
width: calc(100% - 10px);
border: 5px solid blue;
top: 0;
left: 0;
background: lightblue;
height: 50%;
}
<div class="a">
<div class="b">
</div>
</div>
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>
https://codepen.io/anon/pen/dBdaWE
In the codepen above I have 2 divs red and blue. Using z-index we make sure red is above blue even if it comes before blue in markup.
green is a child of blue with z-index of 9999. Even though it's z-index is high it should be trapped inside blue which is clearly below red. As said in the CSS tricks article:
https://css-tricks.com/almanac/properties/z/z-index/
Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.
How does green div, which is a child of blue is able to come on top of red div?
!! note, all quotes here below with a * at the end are from this source
Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.*
How does green div, which is a child of blue is able to come on top of red div?
You have probably mis-interpret that sentence. It is meant for that situation where none of the elements have z-index set. If you style the elements without setting the z-index, it holds the truth. Look at the interactive example here below, which is without modifying the z-index of the elements.
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
}
.blue {
background-color: blue;
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
As you can see, the following statement is true
Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top)*
However, it is not obvious first because blue's position is static, in contrary to the other two elements, whose position are relative (thus non-static). If you expect that blue is above red (and below green), then you have to change its position CSS attribute. It is also mentioned in the link, as quoted here below
Elements with non-static positioning will always appear on top of elements with default static positioning.*
In the example here below, I have given the blue element (look for "ADDED") a non-static position value. This leads to a similar behavior as when all element's position are static: red comes first, then blue comes on top of it, followed by green on top of it because it is a child of blue (lower in hierarchy).
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
}
.blue {
background-color: blue;
position: relative; /* !! ADDED !! */
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
Now, back at the first quote;
Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.*
This occurs when you are only giving the element B (in this situation, it is .red) a z-index value. In the example here below, I have added a z-index value to the red element.
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
z-index:1; /* !! ADDED !! */
}
.blue {
background-color: blue;
position: relative;
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
See, the green element does not appear anymore. This is because red is above blue. And green is a part of the blue.
In yours question, you have given green another z-index value. This will overrule the current behavior so that it becomes above the red element as shown here below.
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
z-index:1;
}
.blue {
background-color: blue;
position: relative;
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
z-index: 2; /* !! ADDED !! */
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
Look at your CSS file. The z-index of .green is 9999.
EDIT: When z-index is auto, no stacking context is created. So red and blue have the same stacking context. This is why the children of blue doesn't work as expected of a nested element with a lower z-index.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
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>