fixed定位侧边栏遮挡主内容区的CSS布局问题求解

页面开发过程中，#about对应div及其内部内容被侧边栏遮挡，此前尝试的多种调整方案均未解决：

• 为元素宽高设置不同数值
• 给body设置inline-block属性，该操作导致整体布局崩溃
• 给body设置flex布局未生效
• 给内容区设置75%宽度
• 给section区块设置15%宽度
  以上操作完成后遮挡问题依旧存在，需要实现主内容区正常展示、不被侧边栏遮挡的效果。

侧边栏<nav>设置了fixed固定定位，该定位模式下元素会脱离标准文档流，不占据常规布局空间，后续的主内容区会默认从视口最左侧开始渲染，因此会被宽度250px的固定侧边栏遮挡。

直接修改主内容外层容器的类名，预留出侧边栏的宽度即可。
将原主内容容器代码：

<div class="min-h-[100vh] w-[100%]">

替换为：

<div class="min-h-[100vh] w-[calc(100%-250px)] ml-[250px]">

参数说明：ml-[250px]为Tailwind CSS工具类，对应样式margin-left: 250px，刚好为固定定位的侧边栏留出展示空间；宽度设置为calc(100% - 250px)可避免内容区总宽度超出视口，防止出现横向滚动条。

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Gantari&display=swap"
      rel="stylesheet"
    />
    <title>Haider Ali</title>
  </head>
  <body class="bg-[#262525] m-0 ">
    <nav class="m-0 p-0 w-[250px] min-h-[100vh] bg-[#3C0949] fixed">
      <div
        class="flex flex-col justify-center items-center min-h-[100vh] gap-[15px]"
      >
        <div class="">
          <img
            class="border-[5px] rounded-full border-solid border-green-900"
            width="200"
            height="130"
            src="assets/face.png"
            alt="Haider Ali"
          />
        </div>
        <div class="link">ABOUT</div>
        <div class="link">SKILLS</div>
        <div class="link">EDUCATION</div>
        <div class="link">PROJECTS</div>
      </div>
    </nav>
    <div class="min-h-[100vh] w-[100%]">
      <section id="about" class="flex min-h-[100vh] items-center">
        <div>
          <h1>Hello</h1>
        </div>
      </section>
      <section id="" class="min-h-[100vh] "></section>
    </div>
  </body>
</html>

styles.css #

@tailwind base;
@tailwind components;
@tailwind utilities;


body {
    height: 100%;
}

* {
    box-sizing: border-box;
    outline: 2px solid limegreen !important;
}

.link {
    font-family: 'Gantari', sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: white;
}

问题效果截图

内容的提问来源于stack exchange，提问作者Haider ali