Css显示在后面

Question

我希望这张图片1看起来像图片2。

图片1

图片2

这是我的顶级消息类名称的css，它是红色的。

.top-message{
  position: fixed;
  z-index: 1030;
  height:22px; 
  width:100%;
  margin-top:-2px;
}

Answer 1

因为

而成为榜首

z-index: 1030;

Z-Index

您需要确保下拉菜单z-index高于top.message

Answer 2

确保侧边栏的z-index超过热门留言的z-index。如果它现在仍然不起作用;尝试将position: relative;提供给侧边栏。

Answer 3

.top-message{
  position: fixed;
  top:0;
  left:0;
  z-index: 1030;
  height:22px; 
  width:100%;
  margin-top:0;
}

Answer 4

假设您有其他人所说的每个元素的容器，您应该确保红色警报的z-index值小于左侧菜单/导航栏的z-index值。在我看来，我会设置一个具有绝对位置的外部容器，并设置构成顶部导航栏的剩余内部容器，红色警报消息和具有相对位置的左侧菜单。确保您设置的z-index数字以0的初始值开始，并在您向代码“级联”时递增1。

Answer 5

此链接有助于Understanding CSS z-index