鍍金池/ 問答/HTML/ css或者js如何實(shí)現(xiàn)這樣的效果

css或者js如何實(shí)現(xiàn)這樣的效果

有個(gè)div可以內(nèi)滾動(dòng)的，不管滾動(dòng)到哪兒，我都想讓黑色矩形區(qū)域始終在這個(gè)框的上面可以看到并且在框內(nèi)水平居中，如何實(shí)現(xiàn)，
試了下div相對(duì)定位，黑色矩形絕對(duì)定位，但是滾動(dòng)條滾動(dòng)的時(shí)候框就看不到了，也滾過去了，
有沒有什么好的方法呢

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

回答
編輯回答
編輯回答
玩控

css有個(gè)屬性叫fixed不就完了么？難道題主的意思我沒看懂？

2017年7月15日 05:06
編輯回答
哚蕾咪

內(nèi)部多嵌套一個(gè) Div 作為滾動(dòng)內(nèi)容的容器，固定元素絕對(duì)定位即可：
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;
}
2018年1月25日 06:47
編輯回答
清夢(mèng)

有人提供了js動(dòng)態(tài)計(jì)算top的，我就提供一個(gè)純css的吧，想法就是外面多包裹一層，用于定位DEMO

2017年11月22日 21:28
編輯回答
深記你

請(qǐng)看大屏幕：
https://jsfiddle.net/gq8dwh5o/

2018年1月4日 20:39
編輯回答
司令

黑框的定位設(shè)置為fixed就好了

2017年12月20日 16:11
編輯回答
巫婆
<!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>
2018年5月15日 16:18
編輯回答
鹿惑
<body>
<nav>置頂層</nav>
<section>內(nèi)容層</section>
<style>
nav{width:50vw;height:10vh;background:black;position:fixed;left:50%;top:10vh;z-index:2;transform: translateX(-50%);color:#fff;text-align:center;}
section{position:relative;width:100vw;height:200vh;z-index:1;background:red}
</style>
2018年8月15日 07:34