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
Related
I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.
HTML:
<div class="container">
<div class="inner" />
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
background: black;
transition: max-height 2s ease-out;
overflow: hidden;
}
.container:hover .inner {
max-height: 200px;
}
As mentioned by Temani Afif, this was nothing more than missing a height.
I want the absolute positioned child touch its parent from outside like this:
.parent {
background: #aaffaa;
width: 200px;
height: 200px;
margin-left: 150px;
display: flex;
align-items: center;
position: relative;
}
.child {
background: #ffaaaa;
width: 100px; // actually unknown, here for demo purposes
height: 100px;
position: absolute;
left: 0;
transform: translate(-100%);
}
<div class="parent">
<div class="child"></div>
</div>
The problem: I can't use the transform property, because it's already in use in a keyframe animation, the element may or may not be position: absolute. Is there some elegant solution to this?
Sure there is! There is just 1 line missing in your code.
You just need to use right:100% and it will be just fine.
.parent {
background: #aaffaa;
width: 200px;
height: 200px;
margin-left: 150px;
display: flex;
align-items: center;
position: relative;
}
.child {
background: #ffaaaa;
width: 100px;
height: 100px;
position: absolute;
right: 100%;
}
<div class="parent">
<div class="child"></div>
</div>
I have 3 HTML elements that I want to order on the z plane:
.bank {
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
z-index: 100;
transform: translateY(10%);
}
.card {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 300;
}
.button {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 30px;
top: 50px;
z-index: 200;
}
<div class="bank">
bank
<div class="card">card</div>
</div>
<div class="button">button</div>
I want the button to be on top of the bank but behind the card. But the button is always on top of both the bank and the card no matter what I try.
Edit: I noticed that removing z-index and transform from '.bank' solves it, but I need the transform property. What can I do?
What may cause it not to work? Thanks
Don't specify any z-index to .bank to avoid creating new stacking context and simply adjust the z-index of the other elements. This will work because all the 3 elements belong to the same stacking context so you can specify any order you want.
.bank {
position:relative;
background: red;
width: 500px;
height: 200px;
}
.card {
position: absolute;
top:0;
z-index: 2;
height: 100px;
width: 400px;
background: blue;
}
.button {
position: absolute;
top: 0;
z-index: 1;
height: 150px;
width: 450px;
background: yellow;
}
.container {
position: relative;
}
<div class="container">
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
</div>
UPDATE
Considering you code, the only way is to remove the z-index and transform from .bank or it will be impossible because your elements will never belong to the same stacking context. As you can read in the previous link:
Each stacking context is self-contained: after the element's contents
are stacked, the whole element is considered in the stacking order of
the parent stacking context.
Related for more details: Why can't an element with a z-index value cover its child?
You can do this by adding z-index only to card class and placing the elements in absolute.
.bank {
width: 150px;
background: red;
height: 150px;
position: absolute;
top: 0;
left: 0;
}
.card {
width: 50px;
background: black;
height: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.button {
width: 100px;
background: blue;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
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>
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.