I have two items in a 'relative' container.
The problem is that the 'absolute' item should be located relative to the container but it is located relative to the second 'static' item.
Example:
<div style="position:relative">
<button style="position:absolute;top: 200px">Botton</button>
<div style="margin-top: 500px">hi</div>
</div>
The div (with 'hi' text) should be located below the button but somehow the button is located 200px below the 'hi' div.
Note: If I will add border to the container it will behave as expected.
Example for the difference where there is a border and where there is not: JSfiddle
it is working as expected, because one is using position:absolute the other is using margin-top, the second one won't be doing margin-top to the sibling because the sibling is out of the flow (using position:absolute)
so instead of margin-top use position:absolute, or use margin-top on both children.
position
div {
position: relative
}
div > * {
position: absolute
}
button {
top: 200px
}
span {
top: 300px
}
<div>
<button>Botton</button>
<span>hi</span>
</div>
margin
button {
margin-top: 200px
}
span {
margin-top: 300px;
display: block
}
<div>
<button>Botton</button>
<span>hi</span>
</div>
Maybe if you delete the 200px from the <button style="position:absolute; top: 200px>Botton</button>?
Related
This question already has answers here:
Pseudo element not full container width when border used
(3 answers)
Closed 1 year ago.
As I know, child's width percentage's standard is parent's content box(only the content, without padding or margin.). So if there's a padding in parent and child's width is 100%, child's width is smaller than parents. But If I position child as a absolute and parent as a relative, child's width is just equal to the parent's no matter padding and margin in parents. Like this:
<div class="first">HI
<div class="second">
HELLO
</div>
</div>
css code
.first{
background-color: yellow;
width:100px;
height:100px;
padding:10%;
position:relative;
}
.second{
background-color: blue;
position:absolute;
width: 100%;
height:100%;
opacity:40%;
}
Eventhough parent's position and relative so Child is totally dependent on '.first'. What's the standard of child's width in this case?
This snippet shows the result of setting the second div to have position relative and then position absolute. You can see that the absolutely positioned element takes on the width of its parent including the padding.
.first {
background-color: yellow;
width: 100px;
height: 100px;
padding: 10%;
position: relative;
}
.second {
background-color: blue;
width: 100%;
height: 100%;
opacity: 40%;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
<h2>The blue square has relative position</h2>
<div class="first">HI
<div class="second relative">
HELLO
</div>
</div>
<h2>The blue square has absolute position</h2>
<div class="first">HI
<div class="second absolute">
HELLO
</div>
</div>
The reason seems to be that:
when a box has position: absolute its containing box is the parent's padding box.
See the accepted answer to: Absolute positioning ignoring padding of parent though I am struggling to find the exact description of that in the actual standard documents and it would be good if someone could point out a primary reference.
UPDATE: thanks to Temani Afif who has pointed out this SO answer which has info. from an actual specification:
The standard of the % for position:absolute is of the nearest positioned ancestor block and if no ancestor is positioned, it is relative to body element. In your case since the first is positioned relative the second will be relative to first and if u remove the position attribute of first, second will be positioned relative to body.
You can also check this - https://www.w3schools.com/css/css_positioning.asp
When I use float, childs pop out of parents.
I just put overflow:hidden on the parent and the child pops back into its parent.
However, I can't do the same with an absolute div and a relative div.
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
The goal is to float 2 images one over another to create a slideshow, but still make the page respect the slideshow as an item.
Expected: "First" hovers above "Second" inside parent
Behavior: "First" and "second" are hidden, parent is 0px in height.
Upon removing overflow:hidden;, they appear outside the parent.
Since you have only absolute div inside a relevant parent div there is effectively no content in the parent div. You can set a preferred height to the parent div but also need to set html and body height to 100%.
Note: You would likely set your parent div to the size of your images to be displayed
I have colored the parent black and the children red for visual point of view.
Is this what you are trying to achieve? Sorry if I have miss understood your question.
html, body {
height:100%;
width:100%;
}
.parent {
position: relative;
height:50%;
width:50%;
background-color:Black;
}
.child {
position: absolute;
background-color:red;
width:20%;
height:20%;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
There are many div elements on my page
<div class="first">
<div class="second">
<div class="third">
<div class="important_div"></div>
</div>
</div>
</div>
I want to position ".important_div" with respect to .first. and in order to do this, I use the position: absolute; property:
.important_div {
position: absolute;
bottom: 0px;
}
Now here are my questions:
1)When I use absolute positioning, it positions my .important_div in respect to .third (father of .important_div). I want to position it in respect to .first div (great-grandfather of .important_div). What should I do?
2)Does {position: absolute} position my element always in respect to its parent?
3)Is there another way to position .important_div at the bottom of .first div, maybe using absolute or something similar?
It's relative to the first nearest positioned ancestor. So, if .third has positioning, it gets positioned relative to that element. Likewise, if .second has positioning (but not .third), it is positioned relative to that. If no elements have positioning, it's relative to the document container.
Here's a fiddle with an example: http://jsfiddle.net/mnKpu/1/
Apply:
position: relative;
to your .first div. And do not apply position: relative; to your .third div if you want to position your .important div relative to your .first div.
SEE THE DEMO here:
I am trying to do a tableless
layout, and I have the following
HTML snippet:
<div class="slider-inner">
<div class="slider-pane">
<div class="container">
<p>...</p>
<div class="did-you-knoow">
<div class="facts">
</div>
<div class="marquee-container">
</div>
</div>
</div>
</div>
</div>
Which is styled w/ this CSS:
div.slider-pane {
width: 1024px;
}
div.container {
display: block;
}
div.facts {
margin-right: 60%;
}
div.marquee-container {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
margin-right: 0;
padding: 10px;
width: 60%;
}
I want the div.facts to occupy the left-40% , and the div.marquee-container
to occupy the right-60% of the div.did-you-know (their immediate parent). I
expect the div.marquee-container to be positioned relative to its parent, and
its width to be 60% of its parent, but its positioning and width are relative
to div.slider-inner, which is 2 levels above its parent.
How do I set the position and width of div.marquee-container relative to
its parent, and not the div three levels above it?
add position:relative to div.container
#locrizak's answer is correct, I needed to add 'position:relative' to the div.container, but I needed to add it to the div.did-you-know as well. In other words, I needed to set all of the containing div's to position:relative in order for the elements in question to be positioned relative to the immediate parent.
I found this was also answered in the MDN page for css position under the 'absolute' definition:
[The browser will] position [the element] at a specified position relative to its closest positioned ancestor or to the containing block
However the W3C reference was not as helpful.
Attempt #3.
Using css, with a strict doctype, can someone please draw 4 div boxes to meet these requirements.
The wrapper or outermost div will scale in height. That means that it could be any height.
The middle div should always be 100% high to match the outer/parent div (#1 in my list)
The next div should be positioned inside, and at the top of div #2
The last div should be positioned inside, and at the bottom of div #2
NOTES:
If you use absolute positioning for this, you will put divs 3 and 4 outside of div #1 and that won't work. The key is to keep divs 3 and 4 within div #2
<div id="wrapper">
<div id="middle">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
#wrapper { height: 200px; position: relative; }
#middle { height: 100%; }
#bottom { position: absolute; bottom: 0; }
It should work for any height you give the #wrapper.
you can play with it here: http://jsfiddle.net/dmBsa/