CODEWITHSUNDEEP
csshtml
Hue
Hue

Reputation: 303

How to make sidebar overlap the header?

I tried using z-index to make the sidebar overlap the header but am unable to do so.

header {
  width: 100%;
  height: 50px;
  background-color: blue;
  z-index: 0;
}

aside {
  height: 100vh;
  width: 300px;
  background-color: green;
  z-index: 200;
}
<body>
  <header></header>
  <aside></aside>
</body>

Upvotes: 1

Views: 1907

Answers (3)

cmp
cmp

Reputation: 452

You could add position: absolute

aside {
  height: 100vh;
  width: 300px;
  position: absolute;
  background-color: green;
  z-index: 200;
}

Upvotes: 0

Banzay
Banzay

Reputation: 9470

Define position: absolute for .aside

header {
  width: 100%;
  height: 50px;
  background-color: blue;
}

aside {
  height: 100vh;
  width: 300px;
  position: absolute;
  top: 0;
  background-color: green;
 }
<body>
  <header></header>
  <aside></aside>
</body>

Upvotes: 2

user1239087
user1239087

Reputation:

This is similar to a prior question. Have you tried to use a negative margin with your sidebar to improve the overlap?

How to overlap sidebar on top of nav-bar

Try this:

header {

width: 100%;

height: 50px;

background-color: blue;

z-index: 0;

}


aside {

height: 100vh;

width: 300px;

background-color: green;

margin: -50px;

z-index: 200;

}

Upvotes: 1

Related Questions