css或者js如何实现这样的效果

有个div可以内滚动的，不管滚动到哪儿，我都想让黑色矩形区域始终在这个框的上面可以看到并且在框内水平居中，如何实现，
试了下div相对定位，黑色矩形绝对定位，但是滚动条滚动的时候框就看不到了，也滚过去了，
有没有什么好的方法呢

PS：不需要依赖外部div的方法

css javascript

阅读 3.5k

7 个回答

得票最新

notebin

3k149

发布于
2017-11-10

✓ 已被采纳

内部多嵌套一个 Div 作为滚动内容的容器，固定元素绝对定位即可：
https://codepen.io/huangbuyi/pen/gXgVKr

<div class="container">
  <div class="fixed"></div>
  <div class="content">
    <p>content</p>
    ...
  </div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.28);
}

.content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.fixed {
  position: absolute;
  left: 50px;
  background: black;
  width: 200px;
  height: 24px;
  margin: auto;
}

请叫我禽兽

1.5k1310

发布于
2017-11-09

请看大屏幕：
https://jsfiddle.net/gq8dwh5o/

linong

29.2k1266132

发布于
2017-11-10

有人提供了js动态计算top的，我就提供一个纯css的吧，想法就是外面多包裹一层，用于定位DEMO

https://jsfiddle.net/jaylin00...

JaredWang

3505

发布于
2017-11-10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 400px;
            background: #ccc;
            overflow: auto;
            position: relative;
        }
        #content {
            height: 1200px;
        }
        #block {
            width: 150px;
            height: 20px;
            position: fixed;
            background: #eee;
            top: 50px;
            left: 75px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="block"></div>
        <div id="content"></div>
    </div>
</body>
</html>