css加侧边栏遮住正文

CSS是网页设计中常用的样式表语言，可以实现许多网页效果，比如加侧边栏遮住正文。下面我们一起来看一下如何实现这种效果。

/* 首先，我们需要给侧边栏和正文设置布局，一般使用flexBox */
.container {
  display: flex;
}
.sidebar {
  width: 25%; /* 设置侧边栏宽度 */
}
.content {
  width: 75%; /* 设置正文宽度 */
}

/* 接下来，我们需要用绝对定位让侧边栏遮住正文 */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1; /* 设置z-index，确保侧边栏在正文之上 */
  background-color: #fff; /* 可以设置背景颜色，以区别正文 */
}

/* 最后，我们需要将正文向右偏移，以便展示侧边栏 */
.content {
  margin-left: 25%;
}

以上就是制作侧边栏遮住正文的方法，只需要简单的几行代码，就可以让网页看起来更加美观。