Force two relatively positioned divs apart

I have been in search of an answer to this for a long time. If you create two relatively positioned divs, they correctly default to display:block and automatically stack one above the other.

But if you place absolutely positioned elements INSIDE the first div, it appears that the second div no longer gives a damn about its independence and places itself right smack on top of the first.

It’s important that I use relative positioning for both divs – for responsive design and for other niggly reasons. Can anyone suggest a tweak that would overcome this situation? It’s possible that I’ve just overlooked something that should be obvious.

Here’s a fiddle to demonstrate: https://jsfiddle.net/j4ea2uwh/

Hi @dthievin and welcome to the SP Forums.

I am confused with your requirements. Is it possible to explain what you would like instead of what is happening that is not to your requirements.

An image, screen dump or diagram would also be helpful.

Sorry, and yes.

I simply want the first relatively positioned div (regardless of its inner, absolutely positioned divs) to remain separate from the second relatively positioned div.

Currently the second div situates itself directly on top of the first div. Both of those are relatively positioned. This doesn’t happen if I remove the inner, absolutely positioned divs, by the way. When I do that, the two relatively positioned divs behave as they should.

There was a fiddle at the end of my last post that shows the predicament.

I think the problem is because there is no height attached to the first div.

Maybe this will help to explain what is required:

I have no idea what you want to do, but your structure makes no sense.

I’m sure this will not work for you, either, but at least the boxes remain in relatively stable positions.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--

-->
    <style type="text/css">
html, body, img {
    padding:0
    margin:0;
}
div {outline:2px dashed red;}

div#shell {
    background:rgba(127,127,127,.25);
}
div#container {
    max-width:960px;
    background:orange;
    padding:20px;
    margin:0 auto;
}
div.inback {
    border:2px;
    text-align:center;
}
div.wrapper {
    display:flex;
    justify-content:space-around;
    padding:30px 0;
}
div.logo {
    display:inline-block;
    width:200px;
    height:100px;
    border:3px dashed blue;
}
div.infobox {
    display:inline-block;
    width:200px;
    height:100px;
    border:3px dashed green;
}
    </style>
</head>
<body>

<div id="shell">
    <div id="container">
        <p>This was a relatively positioned div that appears to ignore any rule that it will follow, not overlap, the first relatively positioned div.</p>
    </div>
    <div class="inback">
        <p>This was a relatively positioned div "behind" the two divs below and whose end tag separates it from the following div (above, in orange).</p>
    </div>
    <div class="wrapper">
        <div class="logo">
            <p>This was an absolutely positioned div.</p>
        </div>
        <div class="infobox">
            <p>This was an absolutely positioned div.</p>
        </div>
    </div>
</div>

</body>
</html>
4 Likes

Just to clarify the terminology I believe you mean ‘statically’ placed elements because even though you have used position:relative as a stacking context you have not positioned the elements relatively anyway as relatively placed elements may indeed overlap other content (i.e. a relatively placed element is one that is moved with co-ordinates using position:relative).

You need to understand that absolute elements are removed from the flow and don’t care about any other content on the page no matter the stacking context. Absolute elements are isolated islands of content that show no respect to anyone else. It therefore follows that you should use absolute elements sparingly and within contexts where they can be controlled so they do not cause problems. In most responsive designs you do not need absolute elements at all or only for the odd icon or short phrase that is not going to interfere with anything else.

If your design requires large doses of absolute positioning then you are doing it wrong as there are better methods. Sometimes you may have to alter the design to fit in with the concept of what is feasible as you can’t always move elements unless you change the structure unless you are using grid or flexbox which will to a certain degree allow elements to appear in other places and still be in the flow.

Look at Rons code above to see how things can be laid out but of course means you can no longer have in-flow content in the bottom part of the page because the absolutely placed elements are in the way.

It may be better if you show a diagram of what you need and we can show how to do it without absolute elements or at least how to maintain the flow of the page.

I also note you are using margin-top:30% on one of your elements and I assume you know that vertical margins refer to the width of the containing block and nothing to do with height so the amount will vary depending on the width of the block? Avoid vertical margins in percentage as they will rarely do what you want.

6 Likes

Yes, you say that the two divs “inback” and “container” has a relative position, but in your JsFiddle the div “inback” has an absolute position with top:0.

Make them both relative (as you say they are) to get the result you want:

I agree with @ronpat about your test code, maybe that’s why you happen to mix up the positioning.

Or I too have no idea what you want to do. :slight_smile:

Edit)
I agree with everything said by @PaulOB too. :slight_smile:

3 Likes

Well, you people are great for offering your expertise. I agree that the code was confusing because it has morphed so many times over the past days that I’ve lost track. I’ve actually tried adding the height to the first div as suggested by Mr. Betong, but I think it became an issue when the screen widths reduced. I’ve also tried combinations of positioning (relative/absolute) for the two small boxes, and doing so entirely messes up the page.

Here is the layout I’m after. I hope to change the full-width image to a slider at some point down the road. But more than anything, I would like the “more content” div to stack rather than overlap the large image regardless of screen width.

2 Likes

Tip: When doing RWD avoid using relative and absolute positioning as much as you can. It will create problems.
I think @PaulOB has already made the point, but if you are still trying that, stop now.

I’m not totally clear about your layout diagram.
Is this it? A full screen image background with a small content box either side, at the top of the page. Followed by a narrower two column content box below.

4 Likes

Yes, this is it. I’ll eventually place a footer below all this, but there’s no need to confuse the issue with that. My problem all along has been getting the narrower, two-column content box to stop overlapping the upper area, to float below it regardless of the viewing device, and to accomplish this without a slew of media queries.

Well for the full-screen header I would probably use something like min-height: 100vh
The two boxed look like flex would work well with them.
Though I seem to think that IE does not like flex without a set height IIRC, will have to test it, but I’m sure I’ve fallen foul of that before.

1 Like

Not sure if this is like the layout you want, but it’s my interpretation of your layout image.

It should be fluid and responsive without any media queries and there is no relative/absolute positioning.

4 Likes

This is still a problem, adding a height does fix it in IE, but a set height stops it being fluid.

I hate the way IE (doesn’t) handles flex.

1 Like

Have a look here for a fix.:slight_smile:

4 Likes

That works. I updated the Pen with that.
And I could probably use that myself too. :smile:

2 Likes

SamA74, I tried the original pen you posted (that you later said was a problem with IE). It works flawlessly for me, even in IE – IE11, that is. I see too that it was Paul who proffered a fix, and maybe that’s why the pen is downright PERFECT!

Well, as they say in another generation, you guys rock. Thanks a million.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.