CODEWITHSUNDEEP
htmlcss
BaconJuice
BaconJuice

Reputation: 3779

DIV position absolute causes other elements after the div to be hidden

I have a div with the following style

#holder{
    margin-top: 1px;
    background-color: #DCE1E5;
    position:absolute;
    left:0;
    right:0;
    display:block;
    padding:8px;
}

My issues is that any element I enter after this div tag is hidden behind the div for example

<div id="holder">My Stuff here of</div>
<div id="somethingelse">This will be hidden behind the top div</div>

Any ideas on how I can fix this, and have it be IE7 compatible?

Upvotes: 0

Views: 4833

Answers (8)

Rebule
Rebule

Reputation: 83

You should try position: relative; instead of absolute in next div.

Upvotes: 0

Mohan Singh
Mohan Singh

Reputation: 883

add top to somethingelse element if position is absolute.

top : the height of #holder

or margin-top : the height of #holder if #holder element is floated like float:left or right;

Upvotes: 0

Bartek Bielawa
Bartek Bielawa

Reputation: 572

IE7 have to set z-index property for any elements with position relative or absolute.

CSS

#holder{
position:absolute;
left:0;
right:0;
display:block;
padding:8px;
margin-top: 1px;
background-color: #DCE1E5;
z-index: 1;}

#somethingelse {
position: relative;
top: 40px;
z-index: 1000;

}

DEMO is here: http://jsfiddle.net/B3jZ5/2/

Upvotes: 1

George Cummins
George Cummins

Reputation: 28936

When you absolutely position an element, it is removed from the normal document flow and placed at the point you specify. All of the other items continue to follow the normal flow of the document, which means that some of them may be positioned at the same place as the absolutely-positioned element.

To fix this, you can adopt one of two approaches:

Don't absolutely position #holder. This will allow it to remain in the normal document flow and play well with the other elements.

or

Provide appropriate margins to position the other elements away from #holder.

Upvotes: 1

Tiago C&#233;sar Oliveira
Tiago C&#233;sar Oliveira

Reputation: 810

position: absolute; removes the element from the flow defined by the box model. Any element that is smaller that holder will be hidden by it. The solution is not to use position: absolute; for that case, since I understand that you are not really wanting something that can be achieved through this.

I would recommend that you take a time to understand what box model is: http://www.w3.org/TR/CSS2/box.html

Upvotes: 2

SunSparc
SunSparc

Reputation: 1922

When you change the #holder DIV to have an "absolute" position, that means that you are taking it out of the regular flow of elements on the page. Thus, all the other elements will flow up to take the place of it. There could be many solutions, based on your end goal. However, just with what you have given us, you can fix the problem by changing the position to "relative".

Upvotes: 0

Reza Owliaei
Reza Owliaei

Reputation: 3373

You should specify top and left for your absolute element. somethingelse element is behind your holder.

Either remove the background color to view #somethingelse or assign a z-index to both elements. Then you can see both elements are overlapped. Also you can add opacity or make holder position to be relative.

Upvotes: 0

seannachie
seannachie

Reputation: 137

This is a z-indexing issue. You can override this behavior by assigning a z-index value to the various elements. And forewarning, IE7 assigns any element with the "position" style a z-index value, so it may take some testing to get it to work correctly. You usually have to assign the z-index to parent elements to get it to work correctly.

Upvotes: 0

Related Questions