CSS定位

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。

为什么要用定位？

举例。。。

元素的定位主要包括偏移属性和定位模式来实现。

一、偏移属性

• 说明

  用来描述定位元素各边相对于其包含块的偏移量。

  偏移属性	说明
  top	顶部偏移量，元素相对于其父元素上边线的距离
  right	右侧偏移量，元素相对于其父元素右边线的距离
  bottom	底部偏移量，元素相对于其父元素下边线的距离
  left	左侧偏移量，元素相对于其父元素左边线的距离

二、定位模式

• 说明

  在CSS中，position属性用于定义元素的定位模式

• 语法

  选择器{position:属性值;}
  

• 属性值

  值	描述
  static	自动定位（默认定位方式）
  relative	相对定位，相对于其原文档流的位置进行定位
  absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
  fixed	固定定位，相对于浏览器窗口进行定位

三、静态定位

• 说明
  是所有元素在HTML文档流中的默认定位方式。即网页中所有元素都默认的是静态定位， 也就是标准流的特性。

• 语法

  {position:static;}
  

• 注意

  在静态定位模式，无法通偏移属性（top、bottom、left或right）来改变元素的位置。

• PS：设置跟不设置其实一个样儿！

四、相对定位(自恋型)

• 说明

  是将元素相对于它在标准流中的位置进行定位，通过设置边偏移属性（left、top、right、bottom值）可将其移至相对于**它自己原来的位置**的定位，不会破坏正常的布局流，它在文档流中的位置仍然保留。

• 语法

  {position:relative;}
  

• 效果

div{
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red;
}
div:nth-child(2){
position: relative;
top: 50px;
left: 200px;
}

• 注意

  1. 相对定位是相对于自己来移动位置，以自己的左上角为基点移动。

  2. 相对定位不脱标，盒子仍在标准流中，且原来的的位置继续占有（人走了，位置还占着）

五、绝对定位(拼爹型)

• 说明

  相对于父级元素的绝对定位，浮出、脱离文档流不占据空间（俗称：脱标），就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。

• 语法

  {position:absolute }
  

• 注意

  完全脱标，完全不占位置

父级没有定位

• 说明

  若所有父元素都没有定位，以浏览器为准对齐(html文档)。

  <style>
      #box1{
          width: 300px;
          height: 200px;
          background-color: orange;
          border: 1px solid yellowgreen;        
      }
      #box2{
          width: 100px;
          height: 100px;
          background-color: pink;
          border: 1px solid red;
          position: absolute;    
          left: 400px;
      }
  </style>
  
  <div id='box1'>
     <div id='box2'>我是子盒子，父亲没定位</div>
  </div>
  

  

父级有定位

• 说明

  绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

• 示例

  <style>
      #box1{
          width: 300px;
          height: 200px;
          background-color: orange;
          border: 1px solid yellowgreen;      
          position: relative;  
          margin: 0 auto;
  
      }
      #box2{
          width: 100px;
          height: 100px;
          background-color: pink;
          border: 1px solid red;
          position: absolute;    
          left: 400px;
          top: 30px;
      }
  </style>
  <div id='box1'>
          <div id='box2'>我是子盒子，父亲有定位</div>
  </div>
  

子绝父相

• 说明

  绝对定位是将子元素依据最近的已经定位（绝对、固定或相对定位）的非静态父元素进行定位。但是我们习惯是，如果子元素是绝对定位， 那么就把父元素设置成相对定位。

• 解释

  因为子元素绝对定位后，完全脱标，不占有位置， 因此可以放到父盒子里面的任何一个地方。而父盒子布局时，最好是占有位置，因此父亲只能是相对定位。

绝对定位实现盒子水平垂直居中

• 说明

  普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了。

• 绝对定位的盒子也可以水平或者垂直居中

  1. 设置left或者top为50%，父盒子宽高的一半

  2. 再设置子盒子左外边距或者上外边距为负的一半

 ```html
 <style>
     #box1 {
         width: 600px;
         height: 400px;
         background-color:orange;
         border: 1px solid yellowgreen;
         margin: 0 auto;
         position:relative; 
     }
     #box2{
         width: 200px;
         height: 100px;
         background-color: pink;
         border: 1px solid red;
         position:absolute;
         top: 50%;
         left: 50%;
         margin-left: -100px;
         margin-top: -50px;
     }
 </style>
 <div id='box1'>
     <div id="box2">
     </div>
 </div>
 ```

六、固定定位(认死理型)

• 说明

  相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不管浏览器滚动条如何滚动，浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

• 语法

  {position:fixed;}
  

• 关键点

  1. 固定定位的元素跟父元素没有任何关系，只认浏览器。
  2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
  3. 固定定位的盒子一定要写宽和高，除非内容撑开可不写。

七、定位元素的层叠（z-index）

• 说明

  检索或设置对象的层叠顺序。即 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

• 语法

  {z-index : auto |number}
  

  auto：默认值

  number:无单位的整数值，取值可为正整数、负整数和0

  没设置z-index时，按书写顺序，后写的盒子显示在上层；设置z-index后，数值越大，层越靠上；

  <style>
      div {
          width: 100px;
          height: 100px;
          position: absolute;
      }
      div:first-child {
          background-color: orange;
          border: 1px solid yellowgreen;
          /* z-index: 2; */
      }
      div:nth-child(2) {
          background-color: pink;
          border: 1px solid red;
          z-index: 1;
          margin: 40px;
      }
      div:last-child {
          background-color: yellow;
          border: 1px solid blue;
          margin: 20px;
      }
  </style>
  <div>box1</div>
  <div>box2</div>
  <div>box3</div>
  

• 注意
  1. 属性值后面无单位
  2. z-index的默认值是0，大值覆盖小值
  3. 取值相同，按书写顺序后写者居上
  4. 仅相对定位、绝对定位、固定定位有此属性，其余标准流，浮动，静态定位都无此属性。

八、定位模式转换

• 说明

  和浮动一样， 块级元素或者行内元素添加了绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为行内块模式，可直接设置宽度和高度。

  <style>
      div{        
          height: 200px;
          background-color: pink;
          /* position: absolute; */
      }
      span{
          width: 100px;
          height: 100px;
          background-color: red;
           /* position: absolute; */
      }
  </style>
  <div>定位模式转换</div>   
   <span>行内元素</span>
  

九、四种定位总结