css布局定位

97 阅读2分钟
  1. 可以让元素自由的摆放在网页的任意位置
  2. 一般用于 盒子之间的层叠情况

image.png

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

image.png

静态定位

注意点:

  1. 静态定位就是之前标准流,不能通过方位属性进行移动

  2. 之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定

相对定位

-   不会脱标
-   相对于它 原来在标准流中的位置
-   继续占有在标准流中的位置

绝对定位

-   会脱标

-   是元素以带有定位的父级元素来移动位置 (拼爹型)

-   **完全脱标** —— 完全不占位置;

-   **父元素没有定位**,则以**浏览器**为准定位(Document 文档)。

-   绝对定位的特点:(务必记住)  


    -   绝对是以带有定位的父级元素来移动位置 (拼爹型) 如果父级都没有定位,则以浏览器文档为准移动位置
    -   不保留原来的位置,完全是脱标的。
    -   因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用。
  • 固定定位

    • 是绝对定位的一种特殊形式: (认死理型) 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
    • 完全脱标 —— 完全不占位置;
    • 只认浏览器的可视窗口

重要定位口诀 —— 子绝父相

子绝父相 —— 子级是绝对定位,父级要用相对定位。 在使用子绝父相的时候,发现父元素已经有绝对定位了,此时直接子绝即可!

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