手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

HTML代码中关于如何使用定位标签position的介绍

时间:2024-10-21 03:25:23

1、下面是建立的一个基础代码模型,大框包含小块,一个父级一个子集

HTML代码中关于如何使用定位标签position的介绍

2、我们对父级和子级进行颜色填充后,现在默认是这样的

HTML代码中关于如何使用定位标签position的介绍

3、如果我们对子级进行设置绝对定位fixed,然后设置top和left值

HTML代码中关于如何使用定位标签position的介绍

4、这样子级就按照规定的位置排列位置,

HTML代码中关于如何使用定位标签position的介绍

5、对父级添加相对定位,子级添加绝对定位,并设置top和right值精确到0

HTML代码中关于如何使用定位标签position的介绍

6、这样子级块就会根据父级所在位置,排列到右上角位置

HTML代码中关于如何使用定位标签position的介绍

7、如果对子级块设置的值是负值,就会超出父级区域,出现在外面

HTML代码中关于如何使用定位标签position的介绍

8、如图所示,这样我们利用定位标签就可以做出各种效果了。

HTML代码中关于如何使用定位标签position的介绍
© 手抄报圈