html中position定位问题

position定位属性，检索对象的定位方式

一、语法：position：static（无特殊定位）/absolute（绝对定位）/relative（相对定位）/fixed（固定定位）

1、static：默认值，无特殊定位，对象遵循HTML原则；

2、absolute：绝对定位，将对象从文档流中拖出，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据body对象而其层叠通过z-index属性定义；

3、relative：相对定位，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；

4、fixed：（固定定位），对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范；

二、绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包含块，相对定位的参照物是元素本身位置

2、绝对定位将对象从文本流中拖出，相对定位不破坏正常的文档流顺序

三、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标、偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考

默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

 

*定位元素的层叠属性：z-index：auto|number（数值，并且不加单位）

检索或设置对象的层叠顺序

auto:默认，堆叠顺序与父元素相等

number：设置元素的堆叠顺序

1、number：较大值的对象会覆盖较小值的对象，如两个绝对定位对象的number值一样大时，那么将依据他们在HTML文档中声明的顺序层叠，此属性仅仅作用于position的值为relative或abslute或fixed的对象

2、这个属性不会作用于窗口控件，如：select、iframe

转载于:https://www.cnblogs.com/dxiaofei/p/5979592.html