定位布局应用
1.定位属性说明
position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
说明:检索对象的定位方式
- 当position的值为非static时,其层叠级别通过z-index属性定义。
- 绝对定位的元素,在top,right,bottom,left属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素;
2.定位属性取值
- static: 对象遵循常规流。此时4个定位偏移属性不会被应用。
- relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
- absolute: 对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠;
3.定位之固定定位
fixed定位是指元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会滚动,且fixed定位使元素的位置与文档流无关,因此不占据空间,且它会和其他元素发生重叠
- position: fixed
- 参照物是浏览器的可视窗口
- 不设置宽高时,宽高是由内容决定的
- 固定定位一般用在网站的侧边栏、回到顶部的结构上
实例 - 搜索栏一般固定定位
京东官网首页地址: https://www.jd.com/
3.定位之绝对定位
绝对定位的特点:
- position: absolute
- 脱离文档流
- 在不设置参照物时,参照物是body
- 人为设置参照物时,必须满足两个条件
- 这个参照物必须是绝对定位元素的父级元素
- 这个父级元素必须带有定位属性(相对、绝对、固定)
- 当绝对定位这个元素设置宽高为100%,继承的是参照物的宽高
- 当绝对定位这个元素不设置四个方向值时,这个绝对定位元素的前面有其他平级(同级)元素,默认会排在这个平级元素的后面
- 在不设置宽高时,宽高是由内容决定的
- 当绝对定位时,同时设置left/right/top/bottom值时,left和top值生效
参考物查找情况:
祖先元素没有定位参考点
- 定位参照物先找最近的上一级祖先元素,上一级祖先元素没有定位属性,则继续网上查找,直到找到body为止;
祖先元素有定位的参考点
- 定位参照物先找最近的上一级祖先元素,上一级祖先元素有定位属性,则上一级有定位属性的祖先元素就是参照物
方法: 始终水平垂直居中
- 绝对定位,上和左50%,再利用margin反向移动宽高的一半
- 绝对定位,上和左50%,再利用translate反向移动宽高的一半
- 绝对定位,四个方向偏移量为0,然后margin设置为auto
1.绝对定位,上和左50%,再利用margin反向移动宽高的一半
.black{width: 500px;height: 500px;background: black;position: relative}
.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;margin: -100px 0 0 -100px;}
2.绝对定位,上和左50%,再利用translate反向移动宽高的一半
.black{width: 500px;height: 500px;background: black;position: relative}
.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}
3.绝对定位,四个方向偏移量为0,然后margin设置为auto
.black{width: 500px;height: 500px;background: black;position: relative}
4.定位之相对定位
相对定位的特点:
- position: relative
- 不脱离文档流
- 相对定位的层级要比其他元素层级大(会盖在其他元素之上)
- 当发生位置改变时,原来的位置还被占用着
- 参照物: 相对定位元素的定位是相对它自己的正常位置的定位
- 给绝对定位当参照物来用
- 当同时设置left和right值时,left值生效。同时设置top和bottom值时,top值生效
应用场景:
- 当自己改变位置时,又不影响其他元素,可以用相对定位
- 给绝对定位当参照物来用
- 配合z-index和top/bottom/left/right一起使用
5.定位元素的异同点
相同点:
- 1.都可以设置top/bottom/left/right 四个方位,如果同时设置top和bottom,不管值的大小,只听top的,如果同时设置left 和 right,不管值的大小,只听left的;
- 2.都可以设置z-index的属性,用来改变层级,z-index的值越大,层级越靠上,反之越靠下; ’
注意: z-indx一定要和position一起使用,否则不起作用;区别:
- 是否脱离正常文档流
- 绝对定位和固定定位: 会脱离正常的文档流(平行漂浮于元素之上: 重叠);
- 绝对定位是会随着滚动条的滚动而滚动
- 固定定位是固定不动,不会随着滚动条的滚动而滚动
- 相对定位: 不会脱离正常的文档流;
参照物
- 绝对定位 : 查找机制: 先找第一层的父元素,如果没有则继续往上查找,直接找到整个浏览器窗口为止,如果上级父元素有定位的参照物,则停止查找;
- 固定定位 : 整个浏览器的窗口
- 相对定位 : 它自己原来本身的位置
6.定位偏移量详解
- top:上偏移量
- bottom:下偏移量
- left:左偏移量
- righ:右偏移量
6.z-index属性详解
z-index 检索或设置对象的层叠顺序:
- z-index用于确定元素在当前层叠上下文中的层叠级别,并确定该元素是否创建新的局部层叠上下文。
- 每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定(每个元素仅属于一个层叠上下文)。
- 同一个层叠上下文中,层叠级别大的显示在上面,反之显示在下面。
- 同一个层叠上下文中,层叠级别相同的两个元素,依据它们在HTML文档流中的顺序,写在后面的将会覆盖前面的。
- 不同层叠上下文中,元素的显示顺序依据祖先的层叠级别来决定,与自身的层叠级别无关。
- 当z-index未定义或者值为auto时,在IE6,7下会创建新的局部层叠上下文,而在高级浏览器中,按照规范不产生新的局部层叠上下文
层叠准则:
- 谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个;
- 后来居上:当元素的层叠水平一致,层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素;