CSS 帮助您定位 HTML 元素。您可以将任何 HTML 元素放置在您喜欢的任何位置。您可以指定元素是相对于其在页面中的自然位置还是基于其父元素进行绝对定位。
现在，我们将通过示例看到所有与 CSS 定位相关的属性 -
相对定位
相对定位更改 HTML 元素相对于其正常显示位置的位置。因此，"left:20"向元素的 LEFT 位置添加 20 个像素。
您可以使用两个值 top 和 left 以及 position 属性可将 HTML 元素移动到 HTML 文档中的任意位置。
- 向左移动 - 对 left 使用负值。
- 右移 - 对left 使用正值。
- 上移 - 对top 使用负值。
- 下移 - 对 top 使用正值。
注意 - 您可以使用 bottom 或 right 值的方式与 top 和 left 相同。
这里是示例 -
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
这个div有相对定位。
</div>
</body>
</html> 绝对定位
具有位置:绝对的元素定位在相对于屏幕左上角的指定坐标处。
您可以使用两个值top和left以及position属性将HTML元素移动到HTML文档中的任何位置。
- 向左移动 - 对left 使用负值。
- 右移 - 对 left 使用正值
- 上移 - 对 top 使用负值。
- 下移 - 对 top 使用正值。
注意 - 您也可以使用 bottom 或 right 值，方式与 top 和 left 相同。
这是一个示例 -
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
这个div有绝对定位。
</div>
</body>
</html> 固定定位
固定定位允许您固定无论滚动如何，元素都会移动到页面上的特定位置。指定的坐标将相对于浏览器窗口。
您可以使用两个值top和left以及position属性将 HTML 元素移动到 HTML 文档中的任意位置。
- 向左移动 - 对 left 使用负值。
- 向右移动 - 对left 使用正值。
- 向上移动 - 对 top 使用负值。
- 移动向下 - 对 top 使用正值。
注意 - 您可以使用bottom或right 值与 top 和 left 的方式相同。
这是一个示例 -
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
这个div有固定的定位。
</div>
</body>
</html>