CODEWITHSUNDEEP
htmlcss
Max Koretskyi
Max Koretskyi

Reputation: 105497

how to make transformed element appear over positioned element?

I have this setup:

   <style>
      .wrapper {
        position: relative;
        z-index:1;
        width: 100px;
        background: yellow;
        min-height: 70px;
      }

      .inner {
        background: blue;
        width: 100px;
        min-height: 70px;
        top: 0;
        bottom: 0;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>

  <body>
    <div class="wrapper"></div>
    <div class="inner"></div>  
  </body>

The wrapper div overlaps the inner div. They both create stacking contexts. Yet if the inner div had its own stacking context created by positioning I could control its stacking context with z-index, but since its stacking context is created by transform how can I make it overlap the wrapper div?

Upvotes: 2

Views: 48

Answers (1)

raina77ow
raina77ow

Reputation: 106385

One possible approach is adding z-index (with the value the same or greater than of .wrapper element) and position:relative to .inner element styling:

.wrapper {
    position: relative;
    z-index: 1;
    /* ... */
}

.inner {
    position: relative;
    z-index: 1;
    transform: translate(-50%, -50%);
    /* ... */
}

Demo Another (rather obvious) approach is removing z-index: 1 definition from the .wrapper styling - but I guess that's not an option.

Upvotes: 1

Related Questions