HTML定位总结大全

一：固定定位

1 语法及作用：

position:fixed

作用：当web页面或移动端页面发生滚动时，应用固定定位的元素，在浏览器的可视区域内不产生移动

2 特点：

1. 使用了固定定位的元素，通过添加margin、translate等属性移动时，根据浏览器的可视窗口移动
   1. 元素不会随着滚动条的移动而移动
2. 脱离文档的标准流(简言之，可以按照给定px、rem移动，而在文档中不会影响其他元素的排版)
   1. 与绝对定位很像，脱离了标准流（又叫文档流、普通流，标签按照规定默认好的方式排列），自行排列

二：绝对定位

1 特点：

• 元素以设置了定位的（positon：fixed/absolate/relative/static），距离元素最近的父元素或祖先元素为定位，进行距离的变化
• 设置了绝对定位的元素脱离了标准流，且不占用位置，不影响文档中其他元素的排列

三：相对定位（自恋型）

1 特点：

• 以自身为标准移动位置
• 设置了相对定位的元素，不脱离标准流，移动后原来的位置保存，且影响页面中其他元素的位置

2 语法格式：

position:absoluate

四：静态定位

1 语法：

psition:static

2 特点：

• 元素默认的定位方式，即标准流定位