问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css中配置position: fixed会导致滚动条被遮挡该怎么解决？

头像
苯萘蒽菲
    15136
    <!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <div style="box-sizing: border-box; position: fixed; border: 1px solid red; left: 0; right: 0; top: 0; bottom: 0; overflow: auto;   ">
        <div style="box-shadow: inherit; position: inherit; left: 0; right: 0; background-color: lightgray;">bar</div>
        <div style="margin-top: 32px;">
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
        </div>
    </div>
</body>
</html>

    image.png
    可以看到图中绿色框标记的部分的滚动条被position样式为fixed的div遮挡了，这个问题该怎么解决呢？

    csshtml
    阅读 11.3k
    3 个回答
    得票最新
    头像
    李大雷
      4k12

      试试将 overflow: auto; 改为 overflow:overlay;
      不过你这个布局的设计挺奇怪的，为什么是一整页fixed呢？

      头像
      NickWang
        1.3k1113
        <!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
<div style="box-shadow: inherit; position: fixed; left: 0; right: 0; background-color: lightgray;">bar</div>
    <div style="box-sizing: border-box; position: fixed; border: 1px solid red; left: 0; right: 0; top: 32px; bottom: 0; overflow: auto;   ">
        
        <div>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
        </div>
    </div>
</body>
</html>
        头像
        Decent_Kook
          2
          新手上路，请多包涵
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏