CODEWITHSUNDEEP
htmlcss
junior_2969
junior_2969

Reputation: 57

absolutely positioned child div of fixed position parent div appearing on top of parent

I am trying to make a fixed position menu-bar with a menu tray that floats from the left. all is working fine except for the fact that tray floating from the left's z-position is above the main menu.

As a result, I cannot see the bottom shadow I applied on the top menu bar.

body {
  background: red;
}

.main-menu {
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40px;
  box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}

.left-menu {
  background: #ffffff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: 500px;
  box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6)
}
<html>

<body>
  <div class="main-menu">
    <div class="left-menu"></div>
  </div>
</body>

</html>

Upvotes: 2

Views: 38

Answers (2)

Mr Lister
Mr Lister

Reputation: 46559

One solution is to repeat the menu bar's shadow inside the left-menu, by using an inset box-shadow.

body {
  background: red;
}

.main-menu {
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40px;
  box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}

.left-menu {
  background: #ffffff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: 500px;
  box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6),
              inset 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}
<html>

<body>
  <div class="main-menu">
    <div class="left-menu"></div>
  </div>
</body>

</html>

But I realise this is a bit of a kludge, and I hope there are better answers!

Upvotes: 2

Carl Binalla
Carl Binalla

Reputation: 5401

I needed to make the two menu siblings to apply z-index. I also added some color for visuals. And since the two menu are now siblings, I needed to adjust the top of the left-menu similar to the height of the main-menu

body {
  background: red;
}

.main-menu {
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40px;
  box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
  z-index: 999;
  background-color: green;
}

.left-menu {
  background: #ffffff;
  position: absolute;
  top: 40px;
  left: 0;
  width: 200px;
  height: 500px;
  box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6);
  background-color: blue;
}
<html>

<body>
  <div class="main-menu">
  </div>
  <div class="left-menu"></div>
</body>

</html>

Upvotes: 2

Related Questions