css中position属性

position 属性规定元素的定位类型。

  属性值：static--默认值没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

　　   absolute--绝对定位，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定（相对于第一个有position属性的父元素，没有相对于根元素）

<div class="ding">
      <div class="ding2">
        <div class="ding3">
          <div class="ding4"></div>
        </div>
      </div>

.ding{
  width: 400px;
  height: 400px;
  background:red;
  padding: 40px;
  /* position: relative;
  left: 100px; */
}
.ding2{

  width: 350px;
  height: 350px;
  background: #000;
  
}
.ding3{
  width: 200px;
  height: 200px;
  background:yellow;
  /* position: absolute;
  left:10px;
  top:100px; */
}
.ding4{
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left:20px;
  top:20px;
}

（这样ding4会相对于根元素定位）

.ding{
  width: 400px;
  height: 400px;
  background:red;
  padding: 40px;
  /* position: relative;
  left: 100px; */
}
.ding2{

  width: 350px;
  height: 350px;
  background: #000;
  
}
.ding3{
  width: 200px;
  height: 200px;
  background:yellow;
  position: absolute;//fixed,relative
  
}
.ding4{
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left:20px;
  top:20px;
}

（这样ding4会相对于ding3定位）

　　    fixed--固定定位，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

　　　 relative--相对定位，相对于其正常位置进行定位。"left:20" 会向元素的 LEFT 位置添加 20 像素