定位（Positioning）
优质
小牛编辑
124浏览
2023-12-01
CSS可以帮助您定位HTML元素。 您可以将任何HTML元素放在您喜欢的任何位置。 您可以指定是否希望元素相对于页面中的自然位置定位，还是基于其父元素定义。
现在，我们将看到所有与CSS定位相关的属性和示例 -
相对定位
相对定位会更改HTML元素相对于正常显示位置的位置。 所以“left:20”为元素的LEFT位置增加了20个像素。
您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。
- 向左移动 - 左侧使用负值。
- 向右移动 - 使用left的正值。
- 上移 - 使用top的负值。
- 下移 - 为top使用正值。
NOTE - 您也可以使用bottom或right值，方法与top和left相同。
这是一个例子 -
<html>
<head>
</head>
<body>
<div style = "<b>position:relative; left:80px; top:2px;</b> background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>
绝对定位
position: absolute的元素position: absolute相对于屏幕左上角的指定坐标处。
您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。
- 向左移动 - 左侧使用负值。
- 向右移动 - 使用left的正值。
- 上移 - 使用top的负值。
- 下移 - 为top使用正值。
NOTE - 您也可以使用bottom或right值，方法与顶部和左侧相同。
这是一个例子 -
<html>
<head>
</head>
<body>
<div style = "<b>position:absolute; left:80px; top:20px; </b>background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
固定定位
固定定位允许您将元素的位置固定到页面上的特定位置，而不管滚动。 指定的坐标将相对于浏览器窗口。
您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。
- 向左移动 - 左侧使用负值。
- 向右移动 - 使用left的正值。
- 上移 - 使用top的负值。
- 下移 - 为top使用正值。
NOTE - 您也可以使用bottom或right值，方法与top和left相同。
这是一个例子 -
<html>
<head>
</head>
<body>
<div style = "<b>position:fixed; left:80px; top:20px; </b>background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>