CODEWITHSUNDEEP
csscss-position
Louis W
Louis W

Reputation: 3252

Overlapping absolutely positioned content

I am having a bit of difficulties with this page. It's ALMOST working correctly.

The red box should be centered (h&v) on the window. WORKS.

The yellow box should be affixed to the bottom of the window. WORKS.

When the window is less then 400 pixels high scroll bars should appear and the yellow box should appear at the bottom of the scroll area. Basically I never want the yellow box to appear over the red box, or vice-versa. DOESN'T WORK

Anyone know how I can achieve this?

Thanks.

Upvotes: 2

Views: 1585

Answers (5)

mercator
mercator

Reputation: 28656

Add this to the CSS for #wrapper:

height: 100%;
position: relative;

The reason this works is because your absolutely positioned elements are positioned relative to the viewport due to the absence of any other containing block. By adding position: relative to the #wrapper (or the body for that matter) you make sure that the containing block becomes the entire body content instead.

The height: 100% is then only needed to ensure that the containing block does at least reach the bottom of the viewport.

Upvotes: 2

jscharf
jscharf

Reputation: 5899

Z-Index is not a factor here. Z-Index will still allow the elements to overlap - it will only dictate which element is on top.

Use a floating element after the red div in the document flow, and then the use of clear on the yellow to create a relationship between the elements (i.e. the yellow div will clear the red and will not overlap).

Sandwiching a relatively-sized element (e.g. height: 100%) between the two will push the yellow div to the bottom of the screen, but it may be tricky to vertically align properly.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253338

It's useful to remember that, without specifying z-index, the elements stack up with the latest element 'highest' in the z-order. So, if you wanted to avoid specifying z-index, reverse the html:

<body>


    <div id="wrapper">

        <div id="footer">

            This is the footer. It should always appear at the bottom of the page, but not over the red box.            

        </div>

        <div id="logo">
            <h1>Logo</h1>
        </div>

    </div>

</body>

Otherwise, as the other answer suggest, specifying a greater number for the #logo than for the #footer will cause #logo to be higher.

To enforce scrollbars when the view-port window is < 400px,

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}

Upvotes: 0

corymathews
corymathews

Reputation: 12619

z-index is what you need. although 1000 is a bit excessive a simple 

#footer{ z-index:2; }
#logo{ z-index:3; }

would do the trick

Upvotes: 0

user142019
user142019

Reputation: 

#footer{z-index: 1000;}
#logo{z-index: 1001;}

Upvotes: 1

Related Questions