网页定位（position）——父相子绝

捞起月亮的渔民~

已于 2022-05-07 12:51:30 修改

阅读量3.4k

点赞数 2

分类专栏： css 文章标签： css

于 2021-03-26 14:19:09 首次发布

本文链接：https://blog.csdn.net/qq_52622178/article/details/115232989

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页定位（position）

position属性

static：默认值，没有定位
relative：相对定位,相对于自己原来的位置进行偏移
absolute：绝对定位，是以它最近一个已经定位的祖先元素为基准进行偏移（若父元素没有定位，则根据浏览器窗口定位）
fixed：固定定位，不会随着鼠标的滚动而滚动，定位基准是浏览器窗口

偏移量：

top：顶端偏移量，相对于其父标签上边线的距离
buttom：底部偏移量，相对于其父标签下边线的距离
left：左侧偏移量，相对于其父标签左边线的距离
right：右侧偏移量，相对于其父标签右边线的距离

这里主要讲解相对定位和绝对定位

相对定位特性
1.对盒子设置相对定位后，脱离文档流，但是它在标准文档流中的位置仍然保存。
2.设置了相对定位的网页元素无论在标准文档流还是在浮动时，都不会对它的父级元素和相邻元素有任何影响，只针对自身原来的位置移动
3.层级提高，可以把标准文档流中的元素及浮动元素盖在下边。

绝对定位特性
1.使用了绝对定位的元素，以它最近一个已经定位的祖先元素为基准进行偏移，如果没有已经定位的祖先元素，就会一直往上级找，要是祖先元素都没有定位的话，就会以浏览器窗口为基准进行定位。
2.绝对定位的元素从标准文档流中脱离，它们对其他元素的定位不会造成影响。

父相子绝：

子元素若要用绝对定位，父级就要用相对定位

  <style type="text/css">
        .box1{
            position: absolute ;
            width: 400px;
            height: 300px;
            background: pink;
            left: 100px;
            top: 50px;
        }
        .box2{
            position: absolute;
            width: 200px;
            height: 200px;
            background: #000;
            left: 100px;
            top: 50px;
        }
          .box3{
            width: 300px;
            height: 200px;
            background: greenyellow;
        }
 </style>
  <body>   
          <div class="box1">
         <div class="box2"></div>
        </div>
        <div class="box3"> </div>
  <body>

粉色盒子使用绝对定位后：
父元素用绝对定位的后果
前面说过：绝对定位脱离标准流时在原文档流中的位置是不存在的，在网页布局中，若是给父元素设置绝对定位，会导致该盒子下面的兄弟盒子往空位置跑，会导致整个网页的布局紊乱。

粉色盒子使用相对定位之后

父元素用相对定位后，脱离文档流之后的原位置仍然占有，不会影响网页的布局。

【使用场景】
在做京东这个登录界面时，基本上都是使用position定位，用完后发现不仅对大盒子定位好用，对于小盒子定位依然好用。
京东登录页面
【注意】
定位和浮动元素不同，浮动只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流的所有内容。