z-order issue when combining relative and absolute/fixed elements and scrollbar

Fixed Issue #14959771

Details

Author
Jerome L.
Created
Dec 5, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

When combining relative and absolute/fixed elements, as well as a scrollbar, there is a weird z-order behavior.

In the following example. removing specific styles or adding an outer-body somehow solves the issue.

<div class="wrapper">
  <div class="toolbar">
    <div class="dropdown">
    </div>
  </div>
  <!-- 
    <div class="body">
      <div class="item">
      </div>
    </div>
  <!-- </div> -->
</div>
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.wrapper {
  position: absolute;
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  position: relative; /* removing this fixes the issue */
  height: 50px;
  background-color: darkblue;
}
.dropdown {
  position: absolute; /* or fixed */
  height: 300px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  top: 10px;
  left: 50px;
  z-index: 1;
}

.outer-body {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;  
}
.body {
  flex: 1;
  min-height: 0;
  background-color: darkgreen;
  overflow: scroll; /* removing this fixes the issue */
}
.item {
  position: relative; /* removing this fixes the issue */
  display: inline-block;
  background-color: lightgrey;
  border: 1px solid black;
  height: 200px;
  width: 200px;
  margin: 20px;
}

Here’s a jsfiddle

Attachments

0 attachments

    Comments and activity

    • To be more precise, the outer-body needs to have a relative positionning.

    • Forgot to specify Edge version:

      Microsoft Edge 40.15063.674.0
      Microsoft EdgeHTML 15.15063

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

    • Hello,

      Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 16299 and is available in our latest Creator’s Update build.

      Best Wishes,
      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “Fixed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in