Absolute Positioning Inside Relative Positioning

Absolute positioning inside relative positioning?

A good example would be when you want to position something to the page or "relative" to a container/div.

Here is my Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/

This shows you that without the absolute div being inside of a "relative" div, the contents are aligned to the document body.

Notice that the green div (#box1), which has position: relative, the div inside (#inner1) it is aligned top/right INSIDE of #box1.

The blue box (#box2), which has the exact same HTML layout as the green box (#box1), does NOT include position: relative and notice that the div inside it (#inner2) is aligned to the top/right of the body

#box1, #box2 {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
}
#box1 {
    background: green;
    position: relative;
}
#box2 {
    background: blue;
}

#inner1, #inner2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    position: absolute;
    background: black;
    opacity: 0.5;
    color: white;
    text-align: center;
    line-height: 50px;
}

---

Here is a good article about it from Chris Coyier...

A page element with relative positioning gives you the control to
absolutely position children elements inside of it.

Source: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Relative div inside an Absolute div

You would expect the relative div d3 to maintain position relative to it's parent. See W3 Specification for Css for more information on how things should be positioned.

I emphasise should as there are quirks within individual browsers for the box model that may have an impact on this.

See the JSFiddle Here for a quick demo of this.

absolute position inside relative with no defined height

Adding whitespace around the child div is fairly trivial. However preventing the parent div from collapsing is more tricky and is the thing you need to tackle first. The problem you are having is that with the parent relatively positioned and the child absolutely positioned, the only element on the entire page that actually "knows" where the child is is the parent... and even then it's a fairly bad parent because it won't even make enough space for the child! The rest of the DOM will behave as if the element isn't even there - other non-positioned elements will float over or above it - even text will be obscured by your child div. Assuming you want to put other content in the parent div using absolute positioning in this way only means you're going to have to use absolute positioning all around the place... which can get a bit heavy on the brain debugging layout problems later on.

The only possible solutions I can think of offhand are:

1. Use javaascript to sniff out the height of the child div and apply that to the parent. A fairly simple job if you use a library like jQuery but that requires extra downloaded files and makes your site unnecessarily bulky if this is the only task you're using it for. THis also wouldn't solve the problem of the child div obscuring other elements on the page.

2. Rework your CSS (and it might take a lot of reworking depending on how far you've got and the complexity of the styling) to use display:inline-block on the child... this will stop the parent from collapsing but might give you additional layout issues.

3. Rework your CSS (ditto) to float:left the child div. You would then need to use a CSS "clear hack" in order to prevent the parent divv from collapsing, although this is a tiny piece of CSS you can cut and paste from elsewhere... an easy job.

If you're determined to use absolute positioning like this my preferred solution would be to use jQuery (option 1) because most of my work tends to use a degree of it anyway... it's a tool I would have handy and the code to perform this task would be quite trivial.

EDIT - Here's a little fiddle to get you started. https://jsfiddle.net/fo8mq1vf/

Absolute positioning inside relative - using bottom: 0 doesn't seem to work

You don't need to set position: relative; in the channel_wrap class, because in this case it disables its child positioning. After doing that, it works as you wanted.

The article you suggested is just two positioning (absolute in relative) inside each other, whilst what you're trying to do is a triple one (absolute in relative in absolute) which doesn't result in what you expect it to.

In fact if you want to keep it triple like this, you need to at least give that channel_wrap div, e.g. a height, so that its children would know how to react to their parental positioning and only then they would know where they should be bottomed to.

More info about positioning and bottom property

Absolute positioning inside relative with 100% width

Yes you can use 100vw which is equal to window width and also use calc to position of absolute element. So if width of parent element is 50% to position absolute element to left: 0 of window you can use transform: translate(calc(-100vw + 75%)) which in this case is equal to -25vw.

html,

body {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

.relative {

  position: relative;

  width: 50%;

  background: lightblue;

  height: 50px;

  margin: 0 auto;

}

.absolute {

  position: absolute;

  left: 0;

  background: black;

  height: 2px;

  top: 50%;

  width: 100vw;

  transform: translate(calc(-100vw + 75%), -50%);

}

<div class="relative">

  <div class="absolute"></div>

</div>

Absolute positioned element inside relative positioned element gets clipped

EDIT:
I've edited the snippet to show a way to wrap the text in the td element in case this is what you were trying to accomplish.

---

If you can't edit the HTML of the child div directly, you can change its attributes with JavaScript. The style attribute's left property having a value of -100px is what's causing your pain.

If you negate the default style attribute entirely, your CSS will be allowed to take over the styling, and the div will be at your mercy.

Try something like:

const childDiv = document.getElementsByClassName("child")[0];

childDiv.style = "";

.parent {

  position: relative;

  border: 2px solid black;

  width: 300px;

  height: 300px;

  overflow: visible;

}

.child {

  position: absolute;

  border: 2px solid black;

  overflow: visible;

  top: 100px;

}

.child td{

  width: 100px;

  white-space: normal;

}

<div style="width:300px;height:300px;border:2px solid black;">

  <div class="parent" style="position:relative;left:200px;width:300px;height:300px;border:2px solid black;overflow:hidden;">

    Relative Parent

    <div class="child" style="position:absolute;left:-100px;border:2px solid black;">

      <table>

        <tbody>

          <tr>

            <td>

              Absolute positioned div element

            </td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

</div>

Absolute positioning inside relative positioned div still does not stay in place

I placed div outside of ul and moved .ui.resizable-se 20px from right. Is this what you want?

<ul id="unlNotification"style="height: 127.7px;">
    <li>qwe</li>
    <li>qwe</li>
    <li>qwe</li>
    ...
</ul>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>

css

.ui-resizable-se {
    right: 20px;
}

jsfiddle

Why does the absolute positioning (position:absolute) cannot be placed inside a static parent container?

HTML elements are positioned static by default and static positioned elements are not affected by the top, bottom, left, and right properties so an element with position: static is not positioned in any special way; it is always positioned according to the normal flow of the page.

An absolute positioned element will position itself relative to the nearest positioned ancestor and the reason why it can't be relative to a static element parent is because otherwise absolute wouldn't be able to position with respect to anything other than the element's immediate pareny and it will have to apply calculations on every element instead of being able to take just shorter paths for static positioning elements.

The use of static positioned elements allows you to have arbitrary elements containers and this let's you have an element to be positionable relative to the element container you wish and not neccerly the intermediate parent.

---

Related Topics