CSS position属性详解

元素位置position

static（默认）

遵从文档流（都在同一个平面布局，占空间），在此状态下定义top、left、right、bottom都不生效

relative

遵从文档流：占空间，但是位置发生偏移。

 /* 相对于自己之前的位置(加上了外边距和内边距还有border的位置)下移 
    属性不会叠加，直接执行最后的一个
    移动之后，原来的空间会保留*/
 <style>
     positon: relative;
     top: 120px;//距离顶端120px，向下移
     top:-50px;
     left: 530px;//离右边530px，向右移
 </style>

absolute

  • 相对于祖系的最近的非static元素的位置（不考虑外边距、border的长度）

  • 脱离文档流：和文档流不在一个平面，位置重复会发生重叠，可以用z-index来改变（改变的话只能放在文档流最底端）显现的元素；

  • 改变窗口大小的时候会依据窗口大小改变，但是在页面中是固定的（拉动滑条会随页面变化） 、

  • //不太准确的描述 位置改变，但原来占有的空间被释放（其他与relative相似）

fixed

脱离文档流

定义成fixed，就会固定在整个屏幕的某个位置，就算拉动滑条，也不会改变位置（这也是它脱离文档流的一个表现）

sticky

  • 有点类似于relative、absolute和fixed的结合

  • 不加top的时候 --- relative（没有粘滞现象）

  • 加方位的时候，（只有加top才会有粘滞现象）初始位置不会改变，但拉动滑条的时候

  • 定义的是自身相对于窗口的位置

  • top：10px，滞留的时候停在距离窗口10px的位置

示例代码

html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d">
         <!-- <div class="d2">B</div> -->
         <div class="d1">A</div>
         <div class="d2">B</div>
         <div class="d3">C</div>
     </div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
 </body>
 </html>

css

 body {
     margin: 0;
     padding: 0;
     font-size: 24px;
 }
 .d {
     /* position: relative; */
     margin: 50px;
     border: 10px solid #000;
     width: 1120px;
     padding: 30px;
     background-color: red;
 }
 .d1,.d2,.d3 {
     width: 1060px;
     height: 100px;
     margin: 20px;
 }
 .d1 { 
     background-color: pink;
     position: sticky;
     /* top:-50px; */
     bottom:20px;
 }
 .d2 {
     background-color: rgb(175, 105, 175);
     
 }
 .d3 {
     background-color: rgb(216, 48, 216);
 }
posted @ 2022-02-07 21:33  Altriacabur  阅读(179)  评论(0)    收藏  举报