问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

有滚动条的div内，固定内部的某个div在视窗的固定位置，纯css该如何实现

头像
叶落阁
    2349

    问题描述

    父类有滚动条的情况下，该如何固定一个子div一直在视图可见的左侧。不随滚动条运动。

    走过路过的大佬，指点一下，多谢

    复现demo https://jsbin.com/cogutad/edi...

    clipboard.png

    csshtmljavascriptphp
    阅读 8.6k
    5 个回答
    得票最新
    头像
    realwds
      11562053
      头像
      牛书书
        10.1k72035

        为什么不让他们成为兄弟呢~
        左侧固定，右侧自适应宽度，这个很简单吧。

        头像
        miaomiao
          18615

          给一个思路：一个父div设置定位position:relative，里面两个子div,其中一个子div为可滚动的元素，另一个设置定位position:absolute/fixed解决

          头像
          吃甜牙疼
            1134
            新手上路，请多包涵

            父元素设置position: relative,红色div设置 position: absolute。这样就解决了

            头像
            JS_Even_JS
              2.6k5

              最外层再用一个父元素进行定位左侧固定，右侧滚动

              <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="grand">
    <div class='box'>
      <div class='long'></div>
      <div class='fix'></div>
    </div>
  </div>
</body>
</html>
              .grand {
  position: relative;
}

.box {
  height: 100px;
  width: 300px;
  overflow: auto;
  background: green;
  margin-top: 200px;
}

.long {
  height: 100%;
  width: 600px;
  background: blue;
} 
.fix {
  height: 100%;
  width: 30px;
  background: red;
  position: absolute;
  left: 0px;
  top: 0;
  z-index: 1;
}
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题