Question

我尝试使用z-index使侧边栏与标题重叠，但我无法这样做。

＆＃13;

header {
  width: 100%;
  height: 50px;
  background-color: blue;
  z-index: 0;
}

aside {
  height: 100vh;
  width: 300px;
  background-color: green;
  z-index: 200;
}

＆＃13;

<body>
  <header></header>
  <aside></aside>
</body>

＆＃13;

Answer 1

为position: absolute

定义.aside

＆＃13;

header {
  width: 100%;
  height: 50px;
  background-color: blue;
}

aside {
  height: 100vh;
  width: 300px;
  position: absolute;
  top: 0;
  background-color: green;
 }

＆＃13;

<body>
  <header></header>
  <aside></aside>
</body>

＆＃13;

Answer 2

这类似于先前的问题。您是否尝试在侧边栏中使用负边距来改善重叠？

How to overlap sidebar on top of nav-bar

试试这个：

header {

width: 100%;

height: 50px;

background-color: blue;

z-index: 0;

}


aside {

height: 100vh;

width: 300px;

background-color: green;

margin: -50px;

z-index: 200;

}

Answer 3

您可以添加position: absolute

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

如何使侧边栏与标题重叠？

3 个答案: