标签：定位 参照物 top 元素 HTML5 margin left
一．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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。