This question already has answers here:
If the child is position:absolute and the parent is overflow:hidden, why does the child overflow?
(4 answers)
Closed 4 years ago.
I have a red square (div) and an orange bar as a pseudo element (before).
I want the part of the orange bar that goes outside the parent square hidden, so I used overflow: hidden; on the parent, but it doesn't work.
.square {
width: 3.5em;
height: 3.5em;
background-color: red;
overflow: hidden;
}
.square::before {
content: "";
position: absolute;
transform: translate(2em);
width: 4.95em;
height: .65em;
background-color: orange;
}
<div class="square"></div>
You need to set position: relative to .square
.square {
width: 3.5em;
height: 3.5em;
position: relative; /* Added */
background-color: red;
overflow: hidden;
}
.square::before {
content: "";
position: absolute;
transform: translate(2em);
width: 4.95em;
height: .65em;
background-color: orange;
}
<div class="square"></div>
The problem
The pseudo element is currently positioned relative to the root.
The solution
You need to make it relative to .square instead by adding position: relative; to .square.
.square {
width: 3.5em;
height: 3.5em;
background-color: red;
overflow: hidden;
Position:relative;
}
.square::before {
content: "";
position: absolute;
transform: translate(2em);
width: 4.95em;
height: .65em;
background-color: orange;
}
<div class="square"></div>
Related
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 3 years ago.
I am trying to achieve inner div opacity 1 while its parent div opacity in 0.5.
Please find my codepen link
https://codepen.io/SandeshSardar/pen/moVyEy
As per current result inner div to getting opacity 0.5 even after applying opacity 1.
<div class="container">
<div class="image">
<div class="green" >
<p>this div also should take opacity </p>
</div>
<div class="middle">
</div>
</div>
.container {
position: relative;
width: 50%;
}
.image {
position: absolute;
opacity: 1;
display: block;
width: 100%;
height: auto;
background: red;
height: 150px;
width: 500px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
height: 50px;
width: 50px;
background-color: blue;
}
.container .image {
background: rgba(255,0,0,.3);
}
.container .middle {
opacity: 1;
z-index: 9999;
}
.container .green {
position: absolute;
display: block;
width: 100%;
background: green;
height: 50px;
width: 500px;
}
You can set the parent .image with
background:rgba(255,0,0,0.5);
and the child .middle with
background:rgba(0,0,255,1);
The 4th value of rgba is the opacity!
EDIT:
.container .green {
position: absolute;
display: block;
width: 100%;
background: rgba(0,255,0,1);
height: 50px;
width: 500px;
}
If you want the opacity of .green to be 0.1 change it to rgba(0,255,0,0.1) instead of opacity: 0.1
I've got a problem with border-radius on wrapper that contains an overflow hidden.
I use a before pseudo element (pink background) to fill the wrapper's background. The wrapper has already a background (blue).
#wrapper {
background: blue;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
With this example, we can see an unwanted blue pixel on the top and bottom left corner.
The pseudo element must be in position absolute to apply animation. I removed the animation for the example.
How can I fix this?
A fix is here. Apply overflow:hidden an width:300px to the outer div #container.
#container {
width: 300px;
overflow: hidden;
border-radius: 12px;
}
#wrapper {
height: 90px;
background: blue;
border-radius: 12px;
position: relative;
box-sizing: border-box;
border: 2px solid pink;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
right: -30px;
position: absolute;
top: 0;
width: 30px;
border-radius: 50%;
transition: transform 0.3s;
}
#wrapper:hover::before {
transform: scale3D(10, 10, 1);
}
<div id="container">
<div id="wrapper"></div>
</div>
You found a really interesting rendering issue. My idea to solve it, is switch the colors and logic a little:
#wrapper {
background: pink;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: blue;
content: '';
display: block;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I have the following markup
<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>
and CSS
.filter {
font-size: 3vw;
text-align: left;
line-height: 1.6;
padding: 0px;
display: block;
height:auto;
overflow: hidden;
margin-bottom: 3px;
}
.filter span {
background: $leithyellow;
height: 100%;
overflow:auto;
display: block;
width: calc(100% - 60px);
float: left;
margin-left:10px;
padding-left:20px;
}
I cannot get the span to expand to 100% height of the button. Can this be done?
Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:
Give position: relative; to the parent.
Give position: absolute; to the element that needs full height and width.
Give the element, 0 values for all the sides.
Snippet
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
In the above snippet, it is noted that this can also work, if you give:
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
width: 100%;
height: 100%;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
One good part about this approach is, you don't need to use the dangerous calc:
.parent {
position: relative;
width: 150px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 60px;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?
Set display: flex to the parent
Set align-self: stretch for the child
This will stretch the height of the child div/button to fit the height of its parent without doing any trick.
By using position: absolute instead of flex-box, it won't be very nice eventually when you have more stuff added or re-arrange later on would be the nightmare.
This question already has answers here:
after pseudo element not appearing in code
(2 answers)
Closed 7 years ago.
I may be misunderstanding the ::before and ::after features in CSS.
What I am trying to achieve, is a box of 200x200px, and then at the top right it would have another box (24x24). Here is what I've got:
https://jsfiddle.net/xd6L3h6v/
<div id="foo">bla test</div>
#foo {
position: relative;
width: 200px;
height: 200px;
background: green;
}
#foo::before {
position: absolute; top: 0; left: 0;
background: red;
width: 24px;
height: 24px;
}
However, this does not work. When I check it in Firefox, I don't see the ::before part in Firebug's DOM inspector.
Where am I going wrong?
Thanks!
You just need to add content: '';
#foo {
position: relative;
width: 200px;
height: 200px;
background: green;
}
#foo::before {
position: absolute; top: 0; left: 0;
background: red;
width: 24px;
height: 24px;
content: '';
}
<div id="foo">bla test</div>