css position详讲及实际开发案例

简单的了解下css布局的三种机制

普通流

浮动本质：让多个盒子在一行显示

定位本质：将盒子定在某个位置 自由的漂浮在其他盒子的上面

一、定位详讲 定位模式 + 位偏移

 定位模式（静态定位static几乎不使用,相对定位relative,绝对定位absolute,固定定位fixed）

 位偏移（top bottom left right）

1.1 relative相对定位的特性

1.相对于自己原来在标准流中位置来移动的 2.在标准流的区域继续占有位置，后面的盒子仍然以标准流的方式对待它。2

* {
      margin: 0;
      padding: 0;
    }

     .one,
    .two,
    .there {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .two {
      position: relative;
      top:100px;
      left: 100px;
      background-color: purple;
    }


<div class="one"></div>
<div class="two"></div>
<div class="there"></div>

1.2absolute绝对定位的特性 

1.完全脱标不占有位置 2.父元素没有定位（只有relative和absolute才有效），则以浏览器为准定位（Document 文档）

.box {
      /* position: static; 无效 */
      /* position: relative; 有效*/
      /* position: absolute; 有效
      left: 50%;   因为设置absolute后会脱标不占有位置，且父级没设置定位 会以docment文档为准，导致下面的margins失效故设置left50%来移动box位置*/
      /* position: fixed;
      left: 50%; 与absolute同理 left移动盒子是为了更直观的看five盒子的父级设置了那些定位才有效*/
      width: 700px;
      height: 700px;
      margin: 0 auto;
      background-color: skyblue; 
      
    }
    .four,
    .five,
    .six {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .five {
      position: absolute;
      top:100px;
      left: 100px;
      background-color: purple;
    }

<div class="box">
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
  </div>

 1.3fixed固定定位的特性

1.完全脱标不占有位置 2.只认浏览器的可视窗口

.seven,
    .eight,
    .nine {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .eight {
      position: fixed;
      top:100px;
      left: 100px;
      background-color: purple;
    }

<div class="seven"></div>
  <div class="eight"></div>
  <div class="nine"></div>

 1.4层叠性

 定位会改变盒子的堆叠顺序，可以z-index用调整 默认值是 0，数值越大，盒子越靠上 ，其他标准流及浮动的盒子无效

二、实际开发案列

2.1讲一下为什么需要子绝父相及定位的盒子，如何水平居中且随着父级的宽度增加依然保持水平居中 

.box1,
    .box2 {
      /* position: absolute;  由于absolute完全脱标不占位置故导致下面的盒子盖上来*/
      position: relative; /*relative相对自身占用位置 这就是子绝父相的原因 */
      width: 1000px;
      height: 240px;
      background-color: pink;
      margin: auto;
    }
    .box2 {
      width: 1000px;
      height: 200px;
      background-color: #000;
    }
    .son {
       /* 盒子水平居中*/
      position: absolute;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

<div class="box1">
    <div class="son"></div>
  </div>
  <div class="box2"></div>

1.2定位（relative(不能直接改高度),只有fiexd和absolute）和浮动改变display属性,所有盒子设置absolute和浮动就可以直接设置宽和高

.display_box {
      /* 标准流的盒子不设width默认占通栏， 设置inline-block反而盒子消失不见了，因为行内块的盒子默认宽度是内容宽度，设置内容天王盖地虎占有宽度;  */
      /* 第一种改变显示模式  */
      /* display: inline-block; */
      /* 第二种改变显示模式  注意盒子脱标了*/
      /* float: right; */
      /* 第三种改变显示模式  注意盒子脱标了*/
      position: absolute;
      /* position: fixed; */
      height: 200px;
      background-color: pink;
    }
    span {
      /* position: relative; */
      position: fixed;
      /* position: absolute; */
      /* float: left; */
      width: 100px;
      height: 100px;
      background-color: purple;
    }

<div class="display_box">天王盖地虎</div>
<span>123</span>

1.3定位（只有绝对定位和固定定位）解决了垂直外边距塌陷的问题

.margin_box {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .margin_box .item {
      /* position: relative;  这个不能解决*/
      /* float: left; */
      /* position: absolute; */
      position: fixed;
      /* 外边距塌陷了 */
      margin-top: 100px;
      width: 50px;
      height: 50px;
      background-color: purple;
    }

<div class="margin_box">
    <div class="item"></div>
  </div>

1.4 为什么定位的盒子需要单独加windth

.one {
      /* 设置fixed后类似转换成行内块,行内块的的宽度是内容填充的 */
      position: fixed; 
      /* 故需设置为通栏的宽度，记住多数定位的盒子我们都需要设置width 重要 */
      width: 100%;
      top: 0;
      height: 44px;
      line-height: 44px;
      background-color: blueviolet;
      /* 单行文本（也包含图片）可水平居中 */
      text-align: center;
    }
    .two {
      height: 2000px;
      background-color: pink;
      margin-top: 44px;
      text-align: center;
    }


<div class="one">123</div>
<div class="two">我是内容体</div>