CODEWITHSUNDEEP
htmlcss
sommeguyy
sommeguyy

Reputation: 87

how to fully wrap an absolute position div with a relative position div?

Is it possible to fully wrap an absolute position div with a relative position div without defining height and width pixel values of outer relative position div? Here i can not see red border of "outerrelativediv" as covered around "innerabsolutediv".

<div id="outerrelativediv" style="position:relative;display:inline-block;border:1px solid red;">
  <div id="innerabsolutediv" style="position:absolute;display:inline-block;">
    SOMETEXT HERE!!!
  </div>
</div>

https://jsfiddle.net/L3bytwnj/

Upvotes: 5

Views: 10734

Answers (1)

tao
tao

Reputation: 90068

The simple answer is: no.

When you give an element position: absolute; you take it out of the normal flow of content. If it is the only child of its parent, the parent will have no flow content. It will be empty.

Normally, empty html elements have width and height values of 0 and, in turn, do not take space in the normal flow of content. There are exceptions that can cause an empty element to be rendered, such as being a child of a flex parent that is stretching its children. But at some point along the chain of parents, one of them has to have a set dimension or at least some content (possibly in a sibling chain) that generates some height/width or otherwise they will all be just a big chain of empty elements not being rendered.

Additionally, paddingand border attributes on a child are generating width / height on parent elements, even when the child does not have content.

Upvotes: 10

Related Questions