五、定位详解

矫情吗；* 2022-02-23 09:48 199阅读 0赞

1.  边偏移（方位名词）  
    简单说， 我们定位的盒子，是通过边偏移来移动位置的。
2.  定位模式 (position)  
    定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
    
    a. 静态定位(static) - 了解  
    b. 相对定位(relative) - 重要  
    相对定位的特点：（务必记住）  
    \- 相对于 自己原来在标准流中位置来移动的  
    \- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。  
    c. 绝对定位(absolute) - 重要  
    绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）  
    1. 完全脱标 —— 完全不占位置；  
    2. 父元素没有定位，则以浏览器为准定位（Document 文档）。  
    3. 父元素要有定位：- 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。  
    d. 固定定位(fixed) - 重要  
    设置了固定定位的元素，会参考浏览器的可视区域
3.  定位(position)的扩展  
    1) 绝对定位的盒子居中  
    注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。  
    在使用绝对定位时要想实现水平居中  
    1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；  
    2. margin-left: -100px;：让盒子向左移动自身宽度的一半。  
    2) 堆叠顺序（z-index）  
    在使用定位布局时，可能会出现盒子重叠的情况。  
    加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。  
    应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。
    
        z-index 的特性如下：
         		1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；	
         		2. 如果属性值相同，则按照书写顺序，后来居上；
         		3. 数字后面不能加单位。
         	注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
         3) 定位改变display属性
         	改变显示模式有以下方式
         		- 可以用inline-block  转换为行内块
         		- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
         		- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
         	所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
4.  定位小结
    
        注意：
         			1. 边偏移需要和定位模式联合使用，单独使用无效；
         			2. top 和 bottom 不要同时使用；
         			3. left 和 right 不要同时使用。