HTML5之position定位

yd_221104950 发表于 2020/12/03 23:00:27 2020/12/03
【摘要】 position 属性规定元素的定位类型,定义建立元素布局所用的定位机制。任何元素都可以定位,绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 position一般分为三种:绝对定位absolute,固定定位fixed,相对定位relative、静态定位static(默认) 1、position:r...

position 属性规定元素的定位类型,定义建立元素布局所用的定位机制。任何元素都可以定位,绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position一般分为三种:绝对定位absolute,固定定位fixed,相对定位relative、静态定位static(默认)

1、position:relative 相对定位

采用相对定位的对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
特点:
1)不影响元素本身的特性;
2)不使元素脱离文档流(元素移动之后原始位置会被保留);
3)如果没有定位偏移量,对元素本身没有任何影响;

2、position:absolute 绝对定位

将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过 z-index属性定义。使用了绝对定位的元素对象不具有边距,但仍有补白和边框。

特点:
1)使元素完全脱离文档流;
2)使内嵌支持宽高;
3)块属性标签内容撑开宽度;
4)如果父级元素有定位(即父元素有设置position属性),则相对于父级发生偏移,否则相对于body发生偏移;
5)相对定位一般都是配合绝对定位元素使用

3、position:fixed 固定定位

与绝对定位的特性基本一致,唯一的差别是始终相对整个文档进行定位。fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位,即使拖动滚动条,他的位置也是不会改变的。与background-attachment:fixed相似。

文章来源: blog.csdn.net,作者:WongKyunban,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/weixin_40763897/article/details/89363425

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。