css如何实现固定定位?(代码实例)

2020-07-23 23:04:41
本章用实例给大家介绍css如何实现固定定位,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

把box2设为固定定位:

<!DOCTYPE html><html dir="ltr">  <head>    <meta charset="utf-8">    <title>定位</title>    <style media="screen">       .box1{        width:100px;         height: 100px;        background-color: rgb(184, 208, 162);      }      .box2{            width:100px;            height: 100px;            background-color: rgb(231, 223, 143);            position:fixed;            left: 100px;            top:  100px;      }      .box3{        width:100px;        height: 100px;        background-color: rgb(188, 211, 213);      }      span{        background-color: rgb(209, 198, 209);      }    </style>  </head>  <body>   <div>    <div>    </div>    <div>      <div>      </div>    </div>    <span>span元素</span>   </div>  </body></html>

输出:

固定定位永远都会相对于浏览器窗口进行定位;

固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动;

3.png