H5学习笔记8 定位

定位

• position

• 定位的属性

position：static；默认值
position：relative；相对定位

     1-1、他的移动是相对于自己初始位置

    1-2、相对定位几乎不单独使用，一般遵循<!-- 父相子绝 -->

    1-3、相对定位在文档流占据位置

    1-4、相对定位不会影响页面其他元素的位置

 

 

• position：absolute；绝对定位

　 2-1、绝对定位在文档流不占据位置

    2-2、绝对定位的移动 是根据有定位属性（relative、absolute）的父元素来定位 ；

         　　如果向上查找，祖元素没有定位属性；

         　　则根据浏览器可视窗口来的（浏览器如果页面很高是按照第一屏最开始展现的屏幕大小来定位的）

    2-3、绝对定位必须结合left/right  top/bottom来使用

    2-4、当你没有设置宽高的时候 元素设置定位后 大小由内容撑开。当然；你可以设置宽高(任何元素都可以设

    2-5、绝对定位的元素 如果是根据祖元素来定位 他是根据祖元素去除边框的区域来定位的

    二级永远设置绝对定位

    注意！！在初期 二级一定要写在元素里面 

• 绝对定位的应用

   　　 轮播图 

   　　 蒙层

 

• position：fixed；固定定位

   　　 3-1、固定定位在文档流不占据位置

    　　3-2、固定定位要结合left/right  top/bottom使用

    　　3-3、固定定位是根据浏览器可视窗口来定位的（他会永远在浏览器这个位置）

 

• position：sticky；粘性定位

   　　  4-1、在可视范围内 类似于相对定位

    　　4-2、滑过并超出可视范围  变成固定定位

    　　4-3、一定要结合left/right top/bottom来使用

    　　4-4、一般多用于移动端

    　　4-5、元素设置粘性定位 外面不允许有其他父元素包裹 

    

• 结合定位使用的属性

　　方向

分为水平和垂直  一般情况下水平和垂直只能选其一
left
fight 
top 
bottom

 

• 定位层叠

z-index
元素定位后面书写的会把前面的覆盖掉 解决方法 z-index
z-index：auto； 默认值 就是0
z-index：999；  代表 谁都无法覆盖掉
z-index：负值；  非常不建议使用！！！