HTML基础学习之 --元素 定位

元素定位

    一、 定位主要包括了以下四种方式：

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

 

    2.  relative: 相对定位，对象不可层叠，将依据 right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置。（相对自身、不脱离文档流)

 

   3. absolute：绝对定位，将对象从文档流中脱离出来，使用 left / right / top / bottom 等属性相对其最接近的一个并有定位设置的父元素进行

 

    定位；如果不存在这样的父对象 则依据html对象（根元素），而其层叠通过z-index属性定义；（脱离文档流 相对于html）

 

   4. fixed： （固定定位）未支持 对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范。（脱离文档流 相对于窗口）

 

 

  二、包含块

      包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考； 默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

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

 

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

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

      2．绝对定位将对象从文档流中脱离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

 

 

  四、定位元素层叠属性

        z-index : auto | (默认为0)

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

        Auto ： 默认值

        Number：无单位的整数值，可为负数。

     说明：

            1）、较大number值的对象会覆盖在较小number值得对象之上。如果number相同 那么将依据他们在html文档中声明的顺序层叠。

 

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

 

五、命名锚点链接的应用:

       超级链接的一种，又叫命名锚记。命名锚记就像一个迅速定位器一样是一种页面内的超级链接。

        1）、命名锚点的作用：在同一页面内的不同位置进行跳转。

2）、给元素定义命名锚记名

语法:<标记 id=”命名锚记名”> </>

3)、命名锚记链接

语法:<a href=”#命名锚记名称”></a>