-3

How to make sidebar appear in front of header?

.header {
  z-index: -10;
  margin: auto;
  width: auto;
  height: 70px;
  background-color: black;
}

.sidebar {
  position: relative;
  z-index: 10;
  margin: auto;
  height: 1335px;
  width: 65px;
  background-color: red;
}
<div id="wrapper">
  <header>
    <div class="header"></div>
    <div class="sidebar"></div>
  </header>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
Ikkaom
  • 13
  • 1
  • 8
  • 2
    In order for us to help you better, please update your question so that it shows your relevant code in a minimal, **complete**, and verifiable example https://stackoverflow.com/help/mcve. It would also be helpful if you could let us know what you have tried so far to solve your problem https://meta.stackoverflow.com/questions/261592. For further information, please refer to the help article regarding how to ask good questions https://stackoverflow.com/help/how-to-ask. – wazz Feb 27 '18 at 20:32
  • https://stackoverflow.com/questions/5480639/how-to-make-div-appear-in-front-of-another/5480656 duplicate? – Julian Espinosa Feb 27 '18 at 20:34
  • it does not work – Ikkaom Feb 27 '18 at 20:35
  • i just checked both divs, the side bar is under the header not underneath – twinaholic Feb 27 '18 at 20:36

1 Answers1

0

In your code, both elements are within the document flow. So the sidebar appears after the header, not overlapping. One method of making them overlap is to set one of them to position:absolute and remove it from the document flow.

body {
  margin: 0;
}

.header {
  height: 70px;
  background-color: black;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -32.5px;
  width: 65px;
  height: 1335px;
  background-color: red;
}
<div id="wrapper">
  <header>
    <div class="header"></div>
    <div class="sidebar"></div>
  </header>
</div>

For further reference, see:
Visual formatting model
Positioning

showdev
  • 28,454
  • 37
  • 55
  • 73
  • Now I addedd .sidebar2 { position: absolute; top: 0; float: right; height: 1335px; width: 151px; background-color: red; } And it does not work again... – Ikkaom Feb 27 '18 at 20:46
  • There's [no need for `float`](https://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together) when using `position:absolute`. You may want to update your question to describe specifically what you're aiming to achieve and where you're getting stuck. – showdev Feb 27 '18 at 20:48
  • Done. Thank you. – Ikkaom Feb 27 '18 at 20:49