Home/ Questions/Q 7062203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:33:57+00:00

I want to have 2 divs. looking like that: The problem is that if

  • 0

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;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0