HTML5定位
⼀．Postion:fixed  固定定位
1. 参照物为浏览器当前窗⼝/视⼝ 如果宽度为%则为参照物的%
2. 不设置宽度会根据内容给撑开,float也是如此。
3. 可以给⾏内标签设置宽⾼
4. 完全脱离⽂档流 可以覆盖内容
5. 依靠偏移量 设置⾃⾝的位置(left/right/top/bottom)
6. 适⽤于⼩⼴告，参照千锋页⾯
⼆．Postion:sticky 粘性定位
1. 应⽤:⼯商银⾏导航栏
2. 当前⾯的⾼度⼤于top后⾯的属性值时，他会随着界⾯滚动，直到前⾯的
⾼度等同于top属性值为⽌，后⾯会执⾏固定定位。
1. 粘性定位同时设置margin-left与left，这时谁⼤取谁
2. 参照物:⽗元素
3. 覆盖其它元素
4. 会⽐较上⾯元素的⾼度与top属性值的⼤⼩，如果属性值⼤于⾼度则直接执⾏固定定位，如果属性值⼩于⾼度先滑动再执⾏固定定位
5. 不可以给⾏内元素设置宽度⾼度
三．Postion:relative  相对定位
1. 参照物:⾃⼰的初始位置
2. 不写宽度，宽度依然是⽗元素的100%
四．Postion:absoult 绝对定位
1.  如果⼦元素设置了绝对定位，那么他会上去有定位的元素【以它为参照物】，如果都没有会到浏览器的窗⼝
2.  可以给⽗元素添加任何定位【除了默认定位】
3. ⽗相⼦[孩⼦+⼦代]绝
4. 可以让⾏内元素设置宽度⾼度
5. 脱离⽂档流[完全脱离]
6. 定位给谁参照物为谁 宽度为参照物的%
五．叠放次序
1. 如果不设置z-index的情况下，后⾯的元素会覆盖前⾯的
2. 增⼤z-index值 从⽽调节顺序
3. Z-index必须加在有定位的地⽅
4. 可以为负数
六．默认static
1. 不能当作绝对定位的参照物
2. 不能通过边偏移量来改变位置
七．关于绝对定位的垂直居中的讲解
1. margin-top的百分⽐参照物是⽗元素
2. top的参考为相对定位元素的⾼度
⼋．⽔平垂直居中
1. 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
margin属性值可以为百分比Top:50%【对于宽来说】 margin-top:-⾃⾝⾼度的⼀半⽔平垂直居中:left:0 right:0 top:0 bottom:0 margin:auto
3.绝对定位的参照物：可以是相对定位/固定定位/粘性定位

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。