CSS中有三种常用的定位方式:1. 相对定位 相对定位,即通过设置元素的top、right、bottom、left属性来相对于元素原本所在的位置进行微调。.example { position: re
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%); }
上面的代码将元素相对于浏览器窗口进行定位,并将元素自身的中心点移动到浏览器窗口的中央。
粉丝
0
关注
0
收藏
0