CSS: Overlapping DIVs issue

Question

I want to have 2 divs. looking like that:

The problem is that if i just set margin-top: -50px DIV2 becomes on TOP. If i use z-index, DIV2 goes behind, but the form on DIV2 cannot be used, since it DIV2 is somewhat behind, cannot be clicked, selected or any of those.

How do I make it work?

DIV1 css:

position:relative;
height: 350px;
margin-top: -50px;
z-index: -10;

DIV2 css:

padding: 24px;
z-index: 10;
margin-bottom: -50px;

Maybe you can use a third, transparent div and give it the largest z-index. Than you place your form in this new div. — Daan Pape
– Daan Pape, Commented Jan 17, 2012 at 14:45

Wesley · Accepted Answer · 2012-01-17 15:00:00Z

2

Without knowing any details, it could be related to negative z-indexes.

The stacking order makes distinction between positive and negative values:

The specs define 7 painting layers. Starting from back to front, they are:

The borders and background of the current stacking context
Positioned descendants with negative z-index
Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
Floating descendants and their contents
Nonpositioned inline content
Positioned descendants with no z-index, z-index: auto, or z-index: 0
Positioned descendants with z-index greater than 0

Source is here.

Try making z-index on div1 positive instead of the z-index of div2 negative

Be careful, z-index only applies on the stack level of a box whose position value is one of absolute, fixed, or relative.

edited Jan 17, 2012 at 15:00

answered Jan 17, 2012 at 14:49

Wesley

2,27415 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mgPePe Over a year ago

i corrected as you said, and instead of having 10 and -10 z-index, i made it 10 and 5, but the layout broke ;\

Wesley Over a year ago

Be careful, z-index only applies on the stack level of a box whose position value is one of absolute, fixed, or relative.

mgPePe Over a year ago

Yes, that was a problem i didn't realize.

mgPePe · Accepted Answer · 2012-01-17 15:02:10Z

0

So thanks to the Wesley's help, here is the actual Code:

DIV1 css:

position:relative;
z-index: 100;

DIV2 css:

z-index: 10;
margin-bottom: -50px;

answered Jan 17, 2012 at 15:02

mgPePe

5,95712 gold badges58 silver badges89 bronze badges

Collectives™ on Stack Overflow

CSS: Overlapping DIVs issue

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related