[分享]css中定位方式如何设置

CSS中有三种常用的定位方式：1. 相对定位 相对定位，即通过设置元素的top、right、bottom、left属性来相对于元素原本所在的位置进行微调。.example { : relative; ...

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

1. 相对定位 

相对定位，即通过设置元素的top、right、bottom、left属性来相对于元素原本所在的位置进行微调。

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

上面的代码将元素相对于原本的位置向下移动10像素，向右移动20像素。

2. 绝对定位 

绝对定位，即通过设置元素的top、right、bottom、left属性来相对于最近的已经定位的祖先元素进行定位。

.example {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

上面的代码将元素相对于最近的已经定位的祖先元素进行定位，并将元素自身的中心点移动到最近定位祖先元素的中央。

3. 固定定位 

固定定位，即通过设置元素的top、right、bottom、left属性来相对于浏览器窗口进行定位。

.example {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

上面的代码将元素相对于浏览器窗口进行定位，并将元素自身的中心点移动到浏览器窗口的中央。