Is it possible to get parent (position: relative) auto extend its width by its absolute child?
Here is my jsfiddle link: http://jsfiddle.net/YD2Xu/
The ideal is #container and #full-width should have the same width as #large-width.
CSS:
#container {
position: relative;
border: 1px solid green;
}
#large-width, #full-width {
display: table;
position: absolute;
}
#large-width {
white-space: no-wrap;
width: 1500px;
height: 200px;
border: 1px solid red;
}
#full-width {
top: 30px;
width: 100%;
border: 1px solid blue;
}
HTML:
<div id="container">
<div id="large-width">
this is large width
</div>
<div id="full-width">
this is full width
</div>
</div>
I need to implement this by css, don't use javascript. Does anyone know how to do it?
Thank you so much.
You can't expand parent's div according to the child's size if child's position is absolute, because elements with absolute position are removed from the flow, so their size and even being are ignored by other elements including the parent. You can set fixed size with CSS or use javascript.
Try
overflow:auto;
for parent;
Related
Is there any solution without JS?
html
<div class="wrapper">
<div class="fix"></div>
</div>
css
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
width: inherit;
height: 20px;
position:fixed;
background: black;
}
I cant add any other styles for .wrapper except width: 100%;.
I try with width: inherit but it doesn't work for me because of I have parent div with only max-width. source
Here is JsFiddle Demo
A position:fixed element is not relative to its parent anymore. It respects only the viewport's boudaries.
MDN Definition:
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So any width, max-width, or whatever property will not be respected by the fixed element.
EDIT
In fact, it won't inherit the width because there's no width property defined on the wrapper.. So, try setting the child as width: 100% and inherit the max-width:
http://jsfiddle.net/mx6anLuu/2/
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
max-width: inherit;
width: 100%;
height: 20px;
position:fixed;
background: black;
}
there is already a width on the column, just set the width of the fixed element to inherit. no reason to complicate things.
CSS:
.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }
HTML:
<div class="col-sm-3">
<div class="fixed-in-div">
...
</div>
</div>
It seems there is no solution without JS.
This blog post by Felipe Tadeo explains why:
https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied
It explains the confusion around width: inherit
"Fixed positions itself relative to the viewport... whenever you inherit width (with position fixed) it will be with respect to the viewport"
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
I have two divs 'parent' and 'child'. Both boxes has a box-sizing property with value of border-box. Parent has fixed width and padding while I need child fluid width and absolute position. Child should be inside the parent div but instead its behaving kind a weird and took parents full width including padding which pushes it outside the parent. My markup looks like:
<div class="parent">
<div class="child"></div>
</div>
and CSS:
.parent{
width: 500px;
height: 500px;
padding: 45px;
box-sizing: border-box;
background-color: red;
position: relative;
}
.child{
width: 100%;
height: 200px;
position: absolute;
bottom: 10px;
box-sizing: border-box;
background-color: orange;
}
You can also see it at JSFiddle. Please suggest!
You need to add a left: 0 to your child element to keep it aligned with the parent element. Check here.
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 9 years ago.
In HTML,When you use the position:absolute css property in child block the absolute value is not taken from parent tag it refer from whole browser window.
the sample code is shown below..
CSS
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
}
.child {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
If you want the arrange the child with in the parent block just add position:relative in the parent CSS
The parent block needs to be have position set to a non-static value, that is:
position: absolute, position: fixed or position: relative.
The value you need depends on the layout application.
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
position:relative;/*this makes all my children s position relative to me */
}
.child {
position: absolute;/* i have an absolute position and i am relative to my parent*/
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
Demo: http://jsfiddle.net/pGvvq/
markup:
<section class=parent>
this makes all my children s position relative to me
<article class=child>
i have an absolute position and i am relative to my parent
</article>
</section>
READ more http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I'd like an element to have relative positioning. But I don't want its child element (with position:absolute) to have relative width to the parent.
For example: http://jsfiddle.net/t2yJP/. I'd like the second body>div to have position:relative, but have its child's width maintain the same behavior.
Try adding width:inherit to the .abs class.
How about this jsFiddle.
But you should really rethink your strategy. In your fiddle, your second example only works because the parent div is not positioned and therefore, the .abs div is technically not in the parent.
Normally, child elements are inside their parents. That's what containers are for! So if you don't want the .abs div to be constrained by the red rectangle, don't put it inside the red rectangle.
I was able to achieve a similar-looking effect as follows:
<div class='abs pad'>
Content content content
</div>
<div class='rel pad red'>
</div>
.rel {
position: relative;
}
.abs {
position: absolute;
z-index: 1;
}
.pad {
padding: 2px;
margin: 2px;
}
.red {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: red;
}