html中position定位问题

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

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

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

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

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

四、fixed：（固定定位），对象定位听从绝对定位方式（absolute）；可是要遵照一些规范；

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

一、参照物不一样，绝对定位的参照物是包含块，相对定位的参照物是元素自己位置

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

3、包含块的概念及做用

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

默认状态下，body是一个大的包含块，全部绝对定位的元素都是根据窗口来定本身所处的位置和百分比大小显示的，若是咱们定义了包含元素为包含元素块之后，对于被包含的绝对定位元素来讲，就会根据最接近的具备定位功能的上级包含元素来定位本身的显示位置。

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

 

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

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

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

number：设置元素的堆叠顺序

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

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