CSS中定位的介绍及使用

静态定位:

静态定位是默认值,就是之前认识的标准流。
代码:postion:static
静态定位不能通过方向偏移值来改变。

相对定位:

自恋型定位,相对于自己之前的位置进行移动。
代码:postion:relative

  1. 需要配合访问属性来移动
  2. 相对于自己原来的位置进行移动
  3. 在页面中占位置→没有脱标

应用场景:配合绝对定位组cp(子绝父相),用于小范围的移动。

绝对定位:

拼爹型定位,相对于非静态定位的父元素进行移动。

代码:position:absolute

  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置→已经脱标

应用场景:配合相对定位组CP(子绝父相)

绝对定位相对于谁移动?

  1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
  2. 祖先元素中有定位 → 相对于最近的 有定位 的祖先元素进行移动

固定定位:

相对于浏览器窗口进行定位,脱离原来的文档流。

代码:position:fixed

子绝父相

含义:子元素用绝对定位,父元素用相对定位。

应用场景:让子元素相对于父元素进行自由移动。

好处:父元素是相对定位,对网页布局影响最小。

子绝父绝特殊场景:

场景:在使用子绝父相的时候,发现父元素已经有相对定位了,此时直接子绝即可!

原因:父元素已经有定位已经满足要求,如果盲目修改父元素定位方式,可能会影响之前写好的布局。

设置偏移值:水平和垂直就近各取一个

水平方向:

  • left:数字+px 距离左边的距离
  • right:数字+px 距离右边的距离

垂直方向:

  • top:数字+px 距离上边的距离
  • bottom:数字+px 距离下边的距离

基本写法:

.blue {
            /* 设置定位方式 */
            position: absolute;
            top: 150px;
            left: 150px;
            background-color: blue;
        }

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

BFC简单介绍

2021-11-25 12:49:27

知识碎片

《个保法》解读| 个人信息处理的合规要求

2021-11-26 14:33:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧