CSS ::定位
CSS可帮助您放置HTML元素。您可以将任何HTML元素放在您喜欢的任何位置。您可以根据元素的父元素来指定元素相对于页面中自然位置的位置还是相对位置。
现在,我们将通过示例看到所有与CSS定位相关的属性-
相对定位
相对位置会更改HTML元素相对于其正常显示位置的位置。因此,“left:20”会将20像素添加到元素的LEFT位置。
您可以将top 和 left两个值 与position 属性一起使用, 以将HTML元素移动到HTML文档中的任何位置。
向左移动–为left使用负值 。
向右移动–为left使用一个正值 。
上移-对top使用负值 。
下移–对top使用正值 。
注意 –您可以使用top 或 left 的相同方式使用 bottom 或 right值 。
这是示例:
This div has relative positioning.
它将产生以下结果-
绝对定位
位置为:绝对的元素 位于 相对于屏幕左上角的指定坐标处。
您可以将top 和 left两个值 与position 属性一起使用, 以将HTML元素移动到HTML文档中的任何位置。
向左移动–为left使用负值 。
向右移动–为left使用一个正值 。
上移-对top使用负值 。
下移–对top使用正值 。
注意 –您可以使用 上下 或 右下的 值。
这是一个例子:
This div has absolute positioning.
固定位置
固定位置使您可以将元素的位置固定到页面上的特定位置,而无需滚动。指定的坐标将相对于浏览器窗口。
您可以将top 和 left两个值 与position 属性一起使用, 以将HTML元素移动到HTML文档中的任何位置。
向左移动–为left使用负值 。
向右移动–为left使用一个正值 。
上移-对top使用负值 。
下移–对top使用正值 。
注意 –您可以使用top 或 left 的相同方式使用 bottom 或 right值 。
这是一个例子:
This div has fixed positioning.
热门推荐
10 广西考试祝福语结婚简短
11 猪年祝福语简短小孩
12 元旦祝福语送长辈简短
13 恭喜二宝祝福语简短
14 祝福语暖心话简短
15 国庆中秋祝福语简短兄弟
16 朋友订婚的祝福语简短
17 送弟弟中秋祝福语简短
18 爱生日祝福语简短独特