[分享]css三个定位机制

CSS是前端开发中必不可少的技术，其中定位机制更是重中之重。CSS定位机制主要分为三种：静态定位、相对定位和绝对定位。/ 静态定位 / p.static { : static; top: 50px; ...

CSS是前端开发中必不可少的技术，其中定位机制更是重中之重。CSS定位机制主要分为三种：静态定位、相对定位和绝对定位。

/* 静态定位 */
p.static {
  position: static;
  top: 50px;
  left: 50px;
}

/* 相对定位 */
p.relative {
  position: relative;
  top: 50px;
  left: 50px;
}

/* 绝对定位 */
p.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
} 

在静态定位中，元素会出现在默认文档流中，left、top、right和bottom属性也不会对元素的位置产生影响。

在相对定位中，元素会在原本属于它的位置和top或left属性值所指定的位置中间调整。

在绝对定位中，元素会脱离原始文档流，以元素的包含块为参照，根据top、left、right和bottom属性值来确定自己的位置。

三种定位机制常用于布局元素，具有各自的特点，根据实际需要来选择。在项目中的定位，还需要考虑到浏览器的兼容性。