全屏打开代码!!!
我想让“浮动 DIV”仅在屏幕顶部边缘接触它时才开始浮动,在此之前我希望我的“浮动 DIV”保持在标题下方。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
body {
background-color: #ccc;
color: #444;
}
.header {
border: 2px solid #000;
width: 100%;
}
.left {
margin-top: 20px;
width: 60%;
float: left;
border: 2px solid #000;
}
.floating {
margin-top: 20px;
width: 100px;
position: fixed;
float: right;
right: 0px;
border: solid 2px red;
}
</style>
<div class="header">
<h1>Header</h1>
<h1>Texto de header</h1>
<h1>Texto de header</h1>
</div>
<div class="left">
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
<hr>
<h1>Ahora mira el espacio que esta entre el div y la parte superior de la pagina. Quiero que ese espacio desaparezca!</h1>
<hr>
</div>
<div class="floating">
EL DIV FLOTANTE
</div>
我希望浮动 div 和浏览器顶部之间的空间为 0px。
您必须对 page/div 容器的内容使用相对/绝对位置。浮动(固定位置)div 必须在另一个 div 内,这是绝对的。
我希望它有帮助