This question already has answers here:
Make absolute positioned div expand parent div height
(15 answers)
Closed last month.
How to expand the parent to have the same height as the child (the content) when the child has position: absolute ?
The height of the child is not static
Solution without javascript
.parent {
position: relative;
background: red;
}
.child {
position: absolute;
right: 10px;
width: 100px;
background: blue;
}
<div class="parent">
<div class="child">
test<br>test<br>test<br>test
</div>
</div>
<div>
some text below parent
</div>
(JsFiddle)
.parent {
position: relative;
background: red;
width: max-content;
}
on the parent
Related
This question already has answers here:
How to make child element higher z-index than parent? [duplicate]
(6 answers)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
I have sibling divs in a page, let's call them parents. And these parents have one child divs each. You can think of these child divs as custom tooltips. By default, child divs are hidden. When I hover one of the parents, it's child div becomes visible.
Because of painting order, when I hover first parent, it's child becomes visible below second parent which painted last on the page. All parents have the same z-index which is 1, as well as all child divs have the same z-index which is 2.
All child divs needs to be drawn on top. How can I override it to work like this?
You can find my problem as reproducible below:
.parent{
position: relative; height: 200px; width: 200px; z-index: 1; display: inline-block;
}
.parent:hover .child{
display: block;
}
.child{
position: absolute; height: 50px; width: 50px; z-index: 2; display: none;
}
<div class="parent" style="background-color: hotpink;">Parent 1<div class="child" style="background-color: yellow; margin-left: 180px; margin-top: 50px;">Child 1.1</div></div>
<div class="parent" style="background-color: green;">Parent 2<div class="child" style="background-color: greenyellow; margin-left: -30px;">Child 2.1</div></div>
The main reason why this behaviour is happening is because:
The child element in Parent1 is in lower stacking order than the Parent Element 2.
Even though it may appear in the first look that first child in first Parent has z-index of 2, but this is with respect to the ParentElement1 not ParentElement2.
Let me give a demo example:
.content {
position: relative;
z-index: 1;
background:orange;
height:400px;
width:400px;
}
.child {
position: absolute;
z-index: 100;
background:green;
height:200px;
width:200px;
bottom:0;
left:0;
}
.side-tab {
position: absolute;
z-index: 5;
background:teal;
height:300px;
width:300px;
top:10px;
}
<section class="content">
<div class="child"></div>
</section>
<div class="side-tab"></div>
Looking at the markup, we can see that the content and side tab elements are siblings. That is, they exist at the same level in the markup (this is different from z-index level). And the child div is a child element of the content element.
Because the child is inside the content element, its z-index of 100 only has an effect inside its parent, the content element.
But the z-index value of child element doesn't mean anything outside the parent, because the parent content element has its z-index set to 1.
So its children, including the child, can’t break out of that z-index level.
SOLUTION:
There are two solutions to this problem.
Remove positioning from the content, so it won’t limit the child's
z-index.
So in your example if your remove position:relative from the Parent this will solve the issue.
.parent{
position: static; height: 200px; width: 200px; display: inline-block; // Removed position:relative from here
}
Since the parent element is now unpositioned, it will no longer limit the child's z-index value.
Move the child outside of the parent, and into the main
stacking context of the page.
(But this would mess things up for you because then you will need to change your markup)
Hope this covers the positioning issue's that we face with z-index.
remove .parent's z-index: 1
.parent{
position: relative; height: 200px; width: 200px; display: inline-block;
}
.parent:hover .child{
display: block;
}
.child{
position: absolute; height: 50px; width: 50px; z-index: 2; display: none;
}
<div class="parent" style="background-color: hotpink;">Parent 1<div class="child" style="background-color: yellow; margin-left: 180px; margin-top: 50px;">Child 1.1</div></div>
<div class="parent" style="background-color: green;">Parent 2<div class="child" style="background-color: greenyellow; margin-left: -30px;">Child 2.1</div></div>
Is it possible to align (with pure CSS/SASS) bottom of child element to the top of parent element while the child has variable height? I want to achieve a popover that is placed above (Y-axis) of parent.
<div id="parent">
<div id="child">
Bottom border of this should always be on top
border of parent - regardless of child's height
</div>
</div>
I can offset child against relative parent with the position: absolute and top: someOffset, but this requires either dynamic offset calculation in js (I don't have any idea how to do it with calc()) or a fixed height of child, but then as the child changes height it will overflow the parent or leave a gap between them.
You have two ways to solve this:
#parent {
display: inline-block;
width: 180px;
height: 100px;
margin: 100px 0;
border: 1px solid red;
position: relative;
}
.child {
position: absolute;
border: 1px solid green;
}
.one {
bottom: 100%;
}
.two {
top: 0;
transform: translateY(-100%);
}
/* this one is hacky but can be useful in some cases */
.three {
height: 0;
top: 0;
display: flex;
align-items: flex-end;
}
<div id="parent">
<div class="child one">
Bottom border of this should always be on top border of parent - regardless of child's height
</div>
</div>
<div id="parent">
<div class="child two">
Bottom border of this should always be on top border of parent - regardless of child's height
</div>
</div>
<div id="parent">
<div class="child three">
Bottom border of this should always be on top border of parent - regardless of child's height
</div>
</div>
The way you started is also fine, just do it this way, using bottom:
#parent {
border: 1px solid red;
position: relative;
margin: 100px 0;
}
#child {
position: absolute;
bottom: 100%;
border: 1px solid yellow;
}
<div id="parent">
Parent
<div id="child">
Bottom border of this should always be on top
border of parent - regardless of child's height
</div>
</div>
Also on JSFiddle.
Eg. how can you get the blue child in this example to be horizontally centered relative to the viewport (ie. in the center of the page), provided that the parent must stay the same.
Other qualifications:
I don't want it to be fixed.
Suppose that distance between the parent and the left viewport is unknown.
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: absolute;
bottom: 100%;
}
<div class="parent">
<div class="child">
child
</div>
</div>
I am trying to make this question a SSCCE. In reality, the use case is that I have a dropup (like dropdown, expect it appears above rather than below the triggering button). I want the dropup menu to be centered.
The menu needs to be absolutely positioned, otherwise it'd get in the way of the flow of other DOM elements. And I need to position the container so that I could set bottom: 100%; on the menu so that it appears right above the triggering button.
In in this case you can use position:fixed BUT to avoid it being fixed apply a null transform to the body:
body {
transform:translate(0,0);
min-height:150vh;
}
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: fixed;
left:50%;
transform:translate(-50%,-100%);
}
<div class="parent">
<div class="child">
child
</div>
</div>
Yes, another annoying overflow question on css...
Here is my case:
HTML
<div id="parent">
<div id="child1">
Some short content that may take a line or two.
</div>
<div id="child2">
Some short to very long content that may overflow parent div...
</div>
<div>
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
}
#child1 {
}
#child2 {
overflow: auto;
}
As you can see I want child2 to overflow the parent div when needed. But as I don't know the exact height of child2 (because child1 may vary a bit) I'm not able to do some absolute positionning as I'm used to with bottom: 0px and top: ???px.
Some JSFiddle to play with : https://jsfiddle.net/6r3ojecL/1/
In the worst case I will use some ugly JS code snippet, but I'll be happy if I could to master css once again. :)
Thanks!
A solution using display: flex. Check the updated fiddle
#parent {
display: flex;
position: absolute;
height: 50%;
width: 100px;
border: 1px solid red;
background-color: red;
flex-direction: column;
}
#child1 {
height: 50px;
background-color: yellow;
}
#child2 {
flex: 1;
background-color: green;
overflow: auto;
}
<div id="parent">
<div id="child1"></div>
<div id="child2">
child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content
</div>
</div>
Set the overflow on the parent and not on the child (updated).
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
overflow: auto;
}
#child1 { }
#child2 { }
The question is: is it possible? I have a div with relative position. Inside this div, I have another div with position: absolute and top: whatever.
This absolute positioned div overlaps content in parent div without any problems, but another relative position div (outside parent) doesn't even care. Before this question I googled as I much as I could, so I'm for 90% sure that it's impossible, or I'm on a wrong way, but I need to be sure.
Here is an example http://jsfiddle.net/MNLbZ/2/
HTML
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main"></div>
CSS
.main {
background: green;
position: relative;
height: 100px;
width: 100px;
z-index: 100;
}
.content {
position: relative;
z-index: 500;
width: 100px;
}
.abs {
position: absolute;
width: 50px;
height: 300px;
top:0;
right: 0;
background: red;
z-index: 999;
opacity: .5;
}
The z-index of the second .main div must be lower than that of the first div that contains the absolute div:
add a class to the second main
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main second"></div>
then use this style:
.second {z-index:99;}
Example