css三种常用定位

在前端开发中，页面布局是一个重要的环节。而CSS中的定位属性可以帮助我们更轻松地进行页面的布局。本文将介绍CSS中三种常用的定位属性。

1. 静态定位（position: static）

CSS中默认的定位属性是静态定位，页面元素会根据文档流进行布局，不会受到其他定位属性的影响。

p {
  position: static;
} 

2. 相对定位（position: relative）

相对定位的元素会相对于其原本应有的位置进行偏移。设置偏移量的属性有left、right、top、bottom。相对定位并不会改变元素的行为特性，因此相对定位的元素仍会占据其原本的空间，对于其他元素的布局不会造成影响。

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

3. 绝对定位（position: absolute）

绝对定位的元素会脱离文档流，以其最近的已定位（即定位属性不为static）的祖先元素作为基准点进行偏移。如果不存在已定位的祖先元素，则会以浏览器窗口作为基准点。

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

以上代码可以将元素定位在父元素的正中央。

以上便是CSS中三种常用的定位属性，合理运用这些属性，可以轻松实现各种页面布局。