Position absolute not inside parent

Question

I have a problem with my CSS regarding div positions.

I have a parent div which is set to position:relative and a child div set to position:absolute

But for some reason the child div is displaying below and outside the borders of the parent div...

This is my CSS:

.big{
    position:relative;
    width:40%;
    border:1px solid black;
    display:inline-block;
}

.small{
    position:absolute;
    width:75px;
    height:75px;
    border:1px solid green;
}

The HTML:

<div class="big">        
    <p align="center">Test</p>
    <div class="small"></div>        
</div>
<div class="big">
    <p align="center">Test</p>
    <div class="small"></div>    
</div>

I have provided a JSFiddle to show you it in action:

http://jsfiddle.net/j6VLc/1/

How do i fix it to make the child div be inside the parent div whilst using position:absolute for it?

Absolute means absolute. You can't have something absolute inside of something else. That would make it relative. — Ethan Turk, Jun 29 '14 at 03:15
Isn't that the point of putting `position:relative` to the parent div? So child divs with absolute are based on the parent and not the window? — Sir, Jun 29 '14 at 03:16
@Ethan - You can absolutely have an element with absolute positioning within another element with relative positioning. That allows you to position it with respect to the relatively positioned ancestor versus the document. — j08691, Jun 29 '14 at 03:17

Alexander O'Mara · Accepted Answer · 2022-02-18T03:27:53.537

7

You can't do this using position: absolute as it removes the element from the normal document flow. position: relative on the parent will change where the position: absolute is positioned relative to, but it will not expand to contain the position: absolute. You will need to set a fixed height or using position: relative instead.

Note, if using position: relative in your example, you will need to add a margin-bottom equal to the value of top to make it expand to contain the position: relative.

.big {
    position: relative;
    width: 40%;
    border: 1px solid black;
    display: inline-block;
}

.small {
    position: relative;
    width: 75px;
    height: 75px;
    border: 1px solid green;
    top: 50px;
    left: 40px;
    margin-bottom: 50px;
    margin-right: 40px;
}

<div class="big">
    <p align="center">Test</p>
    <div class="small"></div>
</div>
<div class="big">
     <p align="center">Test</p>
    <div class="small"></div>
</div>

edited Feb 18 '22 at 03:27

answered Jun 29 '14 at 03:19

Alexander O'Mara

58,688
18
163
171

2

And just to add to this answer, as I was mid-way through mine. **Your child element is actually inside the parent div.** It doesn't look like it, however, because the parent div's height is only contingent upon elements in the flow. `position: absolute;` like @Alexander said, removes elements from the flow. – sir_thursday Jun 29 '14 at 03:20
Well i tried putting the child as `position:relative` but the parent still won't expand automatically... see here http://jsfiddle.net/JjhCb/ – Sir Jun 29 '14 at 03:23
So, there is no way to absolute-position a div within a parent div, without the parent-div no longer knowing how big to be (to contain the child-div), so collapsing unless you know exactly how tall it needs to be, which you don't, if using dynamic-content. – JosephK Aug 20 '17 at 11:37
1

@JosephK No it is not possible, because once removed from the flow, parents are not effected: https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height – Alexander O'Mara Aug 22 '17 at 07:02
`You can't do this using position: absolute as it removes the element from the document flow.` I wish – Captain Prinny Feb 17 '22 at 16:29
@CaptainPrinny I'm not sure what you mean. Absolute positioning does remove it from the normal document flow. – Alexander O'Mara Feb 18 '22 at 03:28

score 2 · Answer 2 · edited Mar 25 '21 at 20:42

As you have given a height of 75px to the child div and inside the parent div you have also given <p> which is a block element so the <p> tag is making its space and after that your child div is appearing....Make the div height of parent element larger than child and style the <p> tag to display: inline;

.big {
    position: relative;
    width: 40%;
    height: 100px;
    border: 1px solid black;
    display: inline-block;
}

.small {
    position: absolute;
    width: 75px;
    height: 75px;
    border: 1px solid green;
}

p {
  display: inline;
}

Hope this will get you to what you want.

Position absolute not inside parent

2 Answers2

Linked

Related