CSS定位

 一、 相对定位relative

　　1、使用position：relative；设置元素相对定位元素；
　　2、使用top,left,right，bottom，调整元素位置。当left和right同时存在时，left生效；
    top和bottom同时存在时，top生效。
【定位机制】
      1、相对定位是相对于自己原来的位置定位。当top等属性不指定时，元素位置不发生变化。
      2、相对定位，不会释放元素在原文档流中位置。不会影响其他文档流元素位置

 

　　

 

二、绝对定位
      1、使用position：absolute；设置元素绝对定位；
【定位机制】
      1、相对于第一个非static定位的祖先元素进行定位。
     （即，相对于使用了relative、absolute、fixed定位的祖先元素进行定位）
      2、如果所有祖先元素都未定位，则相对于浏览器左上角进行定位；
      3、使用absolute的元素，会从文档流中完全被删除。原有空间会被释放。

 

 　　

 

三、固定定位
     1、使用position：fixed；设置固定定位；
      固定定位，是一种特殊的绝对定位，只是祖先元素无法使用定位锁住。
【定位机制】
     1、永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动。

 

四、关于元素Z轴重叠
    1、定位元素，默认的Z轴高于普通文档流元素。
    2、同为定位元素后来者居上。也就是后面的盖住前边的。
    3、可以使用z-index手动调节定位元素的上下层Z轴顺序。
         z-index默认为0，而且只能作用于定位元素。
       
【Z-index 属性】
    1、根据z-index属性设置的数值，决定元素在Z轴方向上的层叠次序；
    2、z-index属性只能给定位元素调整层叠次序
         relative、absolute、fixed
    3、元素的z-index要考虑父容器z-index的约束，
     如果父容器设置了z-index属性，则子容器的所有元素，将不能脱离父容器层次的约束。
     （即，父容器设置z-index，子容器只能以父容器的数值为准，
     再给子容器设置z-index，只能调整子容器在父容器层次之内的层叠次序）
     如果父容器没有设置z-index，或者设置z-index：auto；则子容器调整z-index将不受父容器层次约束。
    4、【z-index：auto；和z-index：0；异同点】
     z-index：auto；是默认值，与z-index：0；处于同一平面；
     z-index：0；会约束子元素必须与父容器在同一层；
     z-index：auto；不会约束子元素的层次。

 

五、【浮动】

  １．标准流中块级盒子，宽度将会自动延伸到１００％；
  而浮动的盒子，宽度不会自动延伸，而是由内容撑开。
  ２．当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在而占据盒子原来的位置（浮动盒子会覆盖在原来盒子上方）。
  但是，未浮动盒子中的内容，将会受到浮动盒子宽度的影响。（未浮动盒子的内容不会被浮动盒子盖住）
  ３、由于第二条的原因。可以给受影响的盒子添加clear属性，清除掉盒子对自身的影响。
  clear可选值：
  left：清楚左浮动影响；
  right：清楚右浮动影响。
  both：清楚左右浮动影响，常选。
  
  ４、父盒子没有指定高度，如果没有浮动，则父盒子的高度可以被子盒子撑开。
  如果，父盒子中的所有盒子浮动，则父盒子高度变为０。
  
  【解决所有子盒子浮动，父盒子塌陷的问题】
  １、给父盒子也添加浮动。
  ２、给父盒子添加overflow：hidden；属性。推荐使用。
  ３、在父盒子最后添加一个高度为０的空ｄｉｖ．给这个ｄｉｖ添加clear：both；属性，清除浮动效果。
  4、可以将第三条的div，用伪对象选择器：：after实现：
  #div::after{
   display: block;
   content: " ";
   height: 0;
   clear: both;
  }
  
  【盒子模型分类】
  １、标准盒子模型（W３C盒子）：我们在设置的宽度高度仅仅包含content部分。
  再添加padding或border。会导致盒子变大；
  ２、IE盒子模型（怪异盒子）：我们设置的宽度和高度，包含content＋padding＋border；
  再添加padding或border，会压缩content区域，但盒子总大小不变；

 

   [手动设置盒子类型]
      box-sizing: border-box; 怪异盒子；
      box-sizing: content-box; 标准盒子；  默认效果。

 

转载于:https://www.cnblogs.com/lgc-17862800193/p/7354935.html