Position 可以将任何HTML元素放在您喜欢的任何位置，无涯教程将通过示例看到所有与CSS定位相关的属性-
Relative 定位
相对位置会更改HTML元素相对于其通常显示的位置。因此，" left:20"会将20像素添加到元素的LEFT位置。
您可以使用两个值 top 和 left 以及 position 属性将HTML元素移动到HTML文档中的任何位置。
- Move Left : 向左使用负值。
- Move Right : 向右使用正值。
- Move Up : 向上使用负值。
- Move Down : 向下使用正值。
注意-您可以使用 bottom 或 right 值，也可以使用 top 和 left 。
<html> <head> </head> <body> <div style="position:relative; left:80px; top:2px; background-color:yellow;"> This div has relative positioning. </div> </body> </html>
它将产生以下输出-
Absolute 定位
position:absolute 的元素位于相对于屏幕左上角的指定坐标处。
您可以使用两个值 top 和 left 以及 position 属性将HTML元素移动到HTML文档中的任何位置。
- Move Left : 向左使用负值。
- Move Right : 向右使用正值。
- Move Up : 向上使用负值。
- Move Down : 向下使用正值。
注意-您可以使用 bottom 或 right 值，方法与顶部和左侧相同。
<html> <head> </head> <body> <div style="position:absolute; left:80px; top:20px; background-color:yellow;"> This div has absolute positioning. </div> </body> </html>
Fixed 定位
固定位置使您可以将元素的位置固定到页面上的特定位置，而无需滚动。指定的坐标将相对于浏览器窗口。
您可以使用两个值 top 和 left 以及 position 属性将HTML元素移动到HTML文档中的任何位置。
- Move Left : 向左使用负值。
- Move Right : 向右使用正值。
- Move Up : 向上使用负值。
- Move Down : 向下使用正值。
注意-您可以使用 bottom 或 right 值，也可以使用 top 和 left 。
<html> <head> </head> <body> <div style="position:fixed; left:80px; top:20px; background-color:yellow;"> This div has fixed positioning. </div> </body> </html>
