定位

定位

一．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

                  Top:50%【对于宽来说】 margin-top:-自身高度的一半

水平垂直居中:left:0 right:0 top:0 bottom:0 margin:auto

3.绝对定位的参照物:可以是相对定位/固定定位/粘性定位