[分享]css中定位有哪几种

CSS中有三种常用的定位方式：1. 静态定位（static）{ : static; } 静态定位是元素默认的定位方式，元素按照文档流的顺序进行布局，不受 top、bottom、left、right 等...

CSS中有三种常用的定位方式：

1. 静态定位（static）

{
    position: static;
} 

静态定位是元素默认的定位方式，元素按照文档流的顺序进行布局，不受 top、bottom、left、right 等属性的影响。

2. 相对定位（relative）

{
    position: relative;
    top: 10px;
    left: 20px;
} 

相对定位是相对于元素本身原来的位置进行定位，通过设置 top、bottom、left、right 等属性来控制元素的位置。移动的时候会有视觉上的偏移，但是元素的占用空间不会被占用。如果不设置 top、bottom、left、right 等属性，元素的位置不会变。

3. 绝对定位（absolute）

{
    position: absolute;
    top: 10px;
    left: 20px;
} 

绝对定位是相对于第一个父元素（非 static 定位的父元素）进行定位，如果没有父元素，就相对于浏览器窗口进行定位。移动的时候不会有视觉上的偏移，元素的占用空间会被占用。如果父元素的位置改变，绝对定位的元素的位置也会相应改变。