CODEWITHSUNDEEP
csshtmlcss-position
user623990
user623990

Reputation:

Why is my absolute-positioned div covering up my relative-positioned div?

I have a "ribbon" type header on the top of my website:

#top-wrapper {
    border-bottom: 5px solid #A1C1BE;
    width: 100%;
    background-color: #59554E;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 100px;
    padding: 10px 0 0 0;
    color: #C0C0A8;
}

The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:

#pagebody {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.

Is there a better way of doing this?

Upvotes: 2

Views: 6861

Answers (4)

MartinodF
MartinodF

Reputation: 8254

As per my comment in another answer:

You can just use width: 100%, but make sure you remove the default gap it leaves with:

html, body {
    margin: 0;
    padding: 0;
}

You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)

Upvotes: 2

Dwight
Dwight

Reputation: 1637

Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:

margin-top:50px;

Upvotes: 2

Kai Qing
Kai Qing

Reputation: 18833

There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.

If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.

You didn't provide html so we don't really know what you're up to totally.

Upvotes: 0

COBOLdinosaur
COBOLdinosaur

Reputation: 294

Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.

Upvotes: 0

Related Questions