The problem is i will stack html elements over each other but, in the div where i do this is the height always zero. And the html elements behind them are under them.
.parent {
position: relative;
}
.child {
height: auto;
width: auto;
position: absolute;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<p>under the other</p>
And now the height of the parent object should adapt to the children.
"And now the height of the parent object should adapt to the children."
That's what you'd expect from tags in normal flow, but the parent and children are position: relative and absolute so behavior is totally different
In the example is the OP code with outlines and another copy of OP but they have position: static, which is default.
.parent {
position: relative;
outline: green 5px dotted;
}
.child {
height: auto;
width: auto;
position: absolute;
}
.child:first-of-type {
outline: dashed 3px red;
color: red;
}
.child:last-of-type {
outline: dashed 3px blue;
color: blue;
}
.x {
position: static
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<p>under the other</p>
<hr>
<div class="parent x">
<div class="child x">1</div>
<div class="child x">2</div>
</div>
<p>under the other</p>
Related
How would I go about centering a pseudo-element on an element with display: table-cell? My attempts have just centered it to the parent element with display: table.
its hard to figure out what you are trying to do when you don't provied any code, is it something like this you are trying to do? just paste this to an html document
<style>
#table-container {
display: table;
padding: 5px;
}
.tr {
display: table-row;
padding: 10px;
}
.td {
display: table-cell;
padding: 10px;
width: 100px;
border: #000000 solid 1px;
margin: 10px;
}
</style>
<div id="container">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
</div>
To get a pseudo element to pick up values such as its dimensions and positioning from its 'owning' element you have to set their positions.
If the position of the owning element is not set then the system will search 'back up' the document until it finds an ancestor with position set and things will be set up in relation to that.
In this snippet as a demo the pseudo element is positioned absolutely and the table-cell itself positioned relative.
.parent {
width: 20vmin;
height: 20vmin;
background: cyan;
display: table;
}
.child {
display: table-cell;
position: relative;
background: yellow;
}
.child::after {
content: '';
width: 50%;
height: 50%;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
I solved it. The trick was to put a container in each cell that handled centering the element and thus its pseudo-element.
I want to make this:
stacked cards
the html would look like so:
<div class="container>
<div class="top-card>
<div class="card-content">
...
</div>
</div>
<div class="bottom-card>
</div>
</div>
I am having trouble styling this so that the height of the entire card adjusts automatically according to the content inside the top card. Thank you in advance.
you can use a combination of box-shadow and display: inline-block to accomplish what you are trying to do. I have updated the answer. Here is the code:
.grandparent {
display: inline-block;
position: relative;
}
.parent {
display: inline-block;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.shadow {
margin-left: -7px;
margin-top: -7px;
background: pink;
z-index: -100;
border: 1px solid green;
}
.empty {
opacity: 0;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent shadow">
<div class="child empty"></div>
</div>
</div>
I have two sections, the 1st section is using position relative and contains 2 absolute children inside with the children being overlayed. The 2nd section contains a title.
I would like to keep the 1st section with position relative in flow so the 2nd section appears below. I understand position absolute takes elements outside of the document flow but is this the case even with a relative parent?
How can i keep the parent in flow?
.parent {
position: relative;
}
.child {
color: white;
position: absolute;
width: 100%;
}
.child1 {
background-color: red;
z-index: 1;
}
.child2 {
background-color: blue;
z-index: 0;
}
<div class="parent">
<div class="child child1">block1</div>
<div class="child child2">block2</div>
</div>
<div class="text">
<h1>block below</h1>
</div>
You just need to set the parent element dimensions, so its children can take place. As the absolute-positioned children are taken off the regular flow, it means that the parent div doesn't contain anything, thus it "disappears". I.e.:
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: Wheat;
}
And the snippet:
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: Wheat;
}
.child {
color: white;
position: absolute;
width: 100%;
}
.child1 {
background-color: red;
z-index: 1;
}
.child2 {
background-color: blue;
z-index: 0;
}
<div class="parent">
<div class="child child1">block1</div>
<div class="child child2">block2</div>
</div>
<div class="text">
<h1>block below</h1>
</div>
If you need the parent div not to exit the normal flow, then it should be static:
.child {
color: white;
position: relative;
width: 100%;
}
.child1 {
background-color: red;
z-index: 1;
position: absolute;
}
.child2 {
background-color: blue;
z-index: 0;
}
<div class="parent">
<div class="child child1">block1</div>
<div class="child child2">block2</div>
</div>
<div class="text">
<h1>block below</h1>
</div>
I'm having troubles positioning my divs. I want to have my child div stick to the bottom of the parent div, with grandchild_1 and grandchild_2 staying correctly put. By that, I mean having grandchild_1 before grandchild_2, like on the picture.
This is what I've tried, but the "child" div sticks to the top :
#parent {
position: relative;
}
#child {
position: absolute; bottom: 0;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">
</div>
<div id="grandchild_2">
</div>
</div>
</div>
Anyone knows how I should proceed ? Thanks !
If you specify a height on the parent it will stick to the bottom.
Example: http://codepen.io/anon/pen/wGqzVd
HTML
<div id="parent">
Parent
<div id="child">
Child
<div id="grandchild_1">
Grandchild 1
</div>
<div id="grandchild_2">
Grandchild 2
</div>
</div>
</div>
CSS
div {
padding: 5px;
}
#parent {
position: relative;
background: lightgray;
height: 200px;
width: 150px;
}
#child {
position: absolute;
bottom: 5px;
background: yellow;
}
#grandchild_1 {
background: pink;
}
#grandchild_2 {
background: lightblue;
}
The provided code works as is...assuming that the parent has a height greater than that of the child.
#parent {
position: relative;
height: 200px;
background: pink;
}
#child {
position: absolute;
width: 100%;
bottom: 0;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
As an alternative to positioning, flexbox can do the same...and the child will affect the height of the parent which an absolutely positioned child cannot.
#parent {
position: relative;
height: 200px;
background: pink;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#child {
width: 100%;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
body {
position: relative;
}
.test {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
}
.wrap {
display: inline-block;
}
.item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.item:last-child {
border-bottom: none;
}
<div class="test">
<div class="wrap">
<div class="item">Some</div>
<div class="item">Larger amount</div>
<div class="item">of text</div>
<div class="item">should go in</div>
<div class="item">these items to prove</div>
<div class="item">that this thing is gonna grow to whatever</div>
<div class="item">to whatever</div>
<div class="item">it needs to</div>
</div>
</div>
The problem is that when the vertical scroll bar appears the absolutely positioned div doesn't grow accordingly and some content on the longest item is cut off. If I take 'overflow-x: hidden' off a horizontal scroll bar appears and that's not what I want either.
When 'white-space: nowrap' is removed everything looks good but I want each item to be one line. Is there any way to have the absolutely positioned div grow according to the width of a 'white-space: nowrap' element?
I think this is what you want
body {
position: relative;
}
.test {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
}
.wrap {
display: inline-block;
}
.item {
padding: 10px;
border-bottom: 1px solid #ccc;
padding-right:28px;
}
.item:last-child {
border-bottom: none;
}
<div class="test">
<div class="wrap">
<div class="item">Some</div>
<div class="item">Larger amount</div>
<div class="item">of text</div>
<div class="item">should go in</div>
<div class="item">these items to prove</div>
<div class="item">that this thing is gonna grow to whatever</div>
<div class="item">to whatever</div>
<div class="item">it needs to</div>
</div>
</div>
I added padding-right:28px; to accommodate for the width of the existing padding and the width of the scrollbar.