HTML5定位
作者:互联网
一.Postion:fixed 固定定位
- 参照物为浏览器当前窗口/视口 如果宽度为%则为参照物的%
- 不设置宽度会根据内容给撑开,float也是如此。
- 可以给行内标签设置宽高
- 完全脱离文档流 可以覆盖内容
- 依靠偏移量 设置自身的位置(left/right/top/bottom)
- 适用于小广告,参照千锋页面
二.Postion:sticky 粘性定位
- 应用:工商银行导航栏
- 当前面的高度大于top后面的属性值时,他会随着界面滚动,直到前面的
高度等同于top属性值为止,后面会执行固定定位。
- 粘性定位同时设置margin-left与left,这时谁大取谁
- 参照物:父元素
- 覆盖其它元素
- 会比较上面元素的高度与top属性值的大小,如果属性值大于高度则直接执行固定定位,如果属性值小于高度先滑动再执行固定定位
- 不可以给行内元素设置宽度高度
三.Postion:relative 相对定位
- 参照物:自己的初始位置
- 不写宽度,宽度依然是父元素的100%
四.Postion:absoult 绝对定位
- 如果子元素设置了绝对定位,那么他会上去找有定位的元素【以它为参照物】,如果都没有会找到浏览器的窗口
- 可以给父元素添加任何定位【除了默认定位】
- 父相子[孩子+子代]绝
- 可以让行内元素设置宽度高度
- 脱离文档流[完全脱离]
- 定位给谁参照物为谁 宽度为参照物的%
五.叠放次序
- 如果不设置z-index的情况下,后面的元素会覆盖前面的
- 增大z-index值 从而调节顺序
- Z-index必须加在有定位的地方
- 可以为负数
六.默认static
- 不能当作绝对定位的参照物
- 不能通过边偏移量来改变位置
七.关于绝对定位的垂直居中的讲解
- margin-top的百分比参照物是父元素
- top的参考为相对定位元素的高度
八.水平垂直居中
- top:0 left:0 right:0 buttom:0
margin:auto;
九.水平居中:
left:0 right:0 margin:auto
Left:50% margin-left:自身宽度的一半
垂直居中:top:0 buttom:0 margin:auto
Top:50% margin-top:自身高度的一半
总结:
1.可以让行内元素设置宽高:float display:block display:inline-block
Fixed absoult
2.水平垂直居中:
图片:父元素设置:line-height=height
Font-size=0
Img:vertical-aling:middle
文字居中:line-height=height
定位居中:水平居中:left:0 right:0 margin:auto
Left:50% margin-left:-自身的宽度的一半
垂直居中:top:0 bottom:0 margin:auto
Top:50%【对于宽来说】 margin-top:-自身高度的一半
水平垂直居中:left:0 right:0 top:0 bottom:0 margin:auto
3.绝对定位的参照物:可以是相对定位/固定定位/粘性定位
标签:定位,参照物,top,元素,HTML5,margin,left 来源: https://blog.csdn.net/weixin_44172610/article/details/121879246