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 婶婶拜年祝福语大全简短