css定位

定位=边偏移+定位模式

边偏移:top、bottom、left、right

不要使用相对的边偏移属性

定位模式

语法：
选择器 { position：属性值 ；}

static静态定位 默认定位方式，无定位的意思。

按照标准流的特性摆放位置，它没有边偏移

相对定位 relative：相对于自身在标准流中的位置来说

  

  
box2 设置相对定位
  

绝对定位 absolute：

1、完全脱标
2、父元素没有没有定位，则以浏览器为准定位
3、父元素有定位，元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位

定位口诀-----子绝父相

因为父级要占用位置，子元素不用占用位置。任意摆放。

固定定位：fixed 绝对定位的一种特殊形式

1、完全脱标---完全不占位置
2、只认浏览器的可视窗口---跟父元素没有任何关系，单独使用；不随滚动条滚动

|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  | 
 |
|  |  |
|  | 
 |
|  |  |
|  |  |
|  |  |
|  | 
 |
|  |  |
|  | 
 |
|  |  |
|  |  |

绝对定位的盒子居中：

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

Image 2.png

  
  
  


  

    
 横向水平居中顶对齐 
    
 横向水平居中底对齐 
    
 垂直居中左对齐 
    
 垂直居中右对齐 
    
    

  

堆叠顺序z-index

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

Image 3.png

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性：一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

同时注意：

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

综合案例：

|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  | 
 |
|  |  |
|  |  <  |
|  |  |
|  |  >  |
|  |  |
|  |  |
|  |  |
|  | 
 |
|  | 
 |
|  | 
 |
|  | 
 |
|  | 
 |
|  | 
 |
|  | 
 |
|  | 
 |
|  |  |
|  |  |