CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 9402

flowing elements as usual after an absolute within relatively positioned element

I'm trying to overlay two elements on top of each other:

<div style="position: relative;">
    <input style="position: absolute; top: 0px; left: 0px">
    <div style="position: absolute; top: 3px; left: 3px;">
        XXXX-XX-XXX
    </div>
</div>

So far so good... the two elements overlay fine, and this will work regardless of where on the page the DIV goes in the flow. But then I go to add the next element to the page:

<div>
PART 2 GOES HERE ABCDEFG
</div>

Uh oh, we have a problem! The next element gets placed under the previous one. How do I get subsequent content back into the normal static flow? The rest of the content can't have to know about this special element, i.e. if the element with the overlay is inserted anywhere in the document it should behave the same as if it was a single element of the same size.

Here's the Fiddle demonstrating the problem.

Upvotes: 0

Views: 36

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65825

As @Santi points out, the content of absolutely positioned elements does not actually contribute to setting the height of the element. But, instead of setting a specific value for height (which may not be correct for all viewports), you can just change the input style to be position:relative so that it's height will be set. Then, you can position the overlay on top of it.

<div>
Content that goes first.
</div>
<div style="position: relative;">
        <input style="position: relative;">
        <div style="position: absolute; top: 1px; left: 3px;">
            XXXX-XX-XXX
        </div>
</div>
<div>
    PART 2 GOES HERE ABCDEFG
</div>

Now, it should be said that you should avoid using inline styles as they create spaghetti code, don't promote code reuse and are difficult to override later, if you need to and, it seems that what you are actually trying to do can be done with basic HTML and no CSS at all:

<div>
Content that goes first.
</div>
<div>
        <input placeholder="xxxx-xxx-xxx">
</div>
<div>
    PART 2 GOES HERE ABCDEFG
</div>

Upvotes: 2

Tyler Roper
Tyler Roper

Reputation: 21672

Elements that are positioned using position: absolute; won't take up any actual height. Your position: relative; div will now also have a height of 0, because none of its children occupy any height.

By simply adding a height to this div, your elements should behave as you expect:

<div>
Content that goes first.
</div>
<div style="position: relative; height: 25px;">
        <input style="position: absolute; top: 0px; left: 0px">
        <div style="position: absolute; top: 3px; left: 3px;">
            XXXX-XX-XXX
        </div>
</div>
<div>
    PART 2 GOES HERE ABCDEFG
</div>

EDIT: If you don't want a forced-height, you might be better off with this solution by Scott Marcus.

Upvotes: 2

Related Questions