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

发布于
2021-12-27

<!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>

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

css html

阅读 11.4k

3 个回答

得票最新

NickWang

1.3k1113

发布于
2021-12-27

<!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

发布于
7 月 27 日上海

新手上路，请多包涵

https://segmentfault.com/a/1190000017044563

查看全部 3 个回答

推荐问题