H5中position属性有哪些取值和具体效果？

本文共计760个文字，预计阅读时间需要4分钟。

了解H5中position属性的不同值及其效果，以下代码示例：

.static { position: static; width: 100px; height: 100px; background-color: red; }

.relative { position: relative; top: 50px; left: 50px; background-color: green; }

.absolute { position: absolute; top: 100px; left: 100px; background-color: blue; }

.fixed { position: fixed; top: 0; left: 0; background-color: yellow; }

StaticRelativeAbsoluteFixed

在HTML5中，position属性用来控制元素在页面中的定位方式。它有四个不同的值：static（默认值）、relative、absolute和fixed。

- static：元素按照正常文档流进行定位。- relative：相对于其正常位置进行定位。- absolute：相对于最近的已定位祖先元素进行定位。- fixed：相对于浏览器窗口进行定位。