HTML | DOM 样式位置属性

在 HTML 和 DOM 中，样式属性可以通过位置属性来指定。这些属性用于定义元素的位置和大小，以及相应的样式。这些位置属性包括：

• position
• top
• bottom
• left
• right

position 属性

position 属性用于定义元素在文档中的定位方式。常用的值有：

• static（默认值）：元素遵循正常文档流，不进行任何定位
• relative：元素相对于其正常位置进行定位
• absolute：元素相对于其最近的已定位的父元素进行定位
• fixed：元素相对于浏览器窗口进行定位，即元素固定在屏幕上不动

<div style="position: relative; top: 20px; left: 30px;">相对定位</div>
<div style="position: absolute; top: 20px; left: 30px;">绝对定位</div>
<div style="position: fixed; top: 20px; left: 30px;">固定定位</div>

top、bottom、left、right 属性

这些属性用于定义元素的偏移量，即元素与其父元素的位置关系。常用的值有：

• auto（默认值）：浏览器会自动计算位置
• 单位值（如 px、em 等）：元素与父元素的距离

<div style="position: relative; top: 20px; left: 30px;">上20px，左30px</div>
<div style="position: absolute; bottom: 20px; right: 30px;">下20px，右30px</div>