CODEWITHSUNDEEP
htmlcss
Bender
Bender

Reputation: 87

Why button is overlapping with div?

I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.

The content div has css:

#groupMembers {
    position: absolute;
    height: 50%;
    width: 90%;
    left: 5%;
    overflow: scroll;
    display: inline-block;
}

and the button has:

button {
    display: inline-block;
    width: 70%;
    left: 15%;
}

I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/

Can anybody help me get the button to display beneath the content div?

Upvotes: 1

Views: 5967

Answers (3)

Scott
Scott

Reputation: 21882

Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.

Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.

Then adjust margins for #DIV_05 and the button.

Fiddle Update or Fiddle Update 2

(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)

By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.

Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.

Upvotes: 2

Kevin Katzke
Kevin Katzke

Reputation: 3761

The problem in your code is that you have given the #DIV_5 the following CSS:

position: absolute;

By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).

To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)

Upvotes: 0

Onome Etefia
Onome Etefia

Reputation: 11

Try giving your div tag a higher z-index value.

Upvotes: -1

Related Questions