css中position属性

wangjie 2020-02-26

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 像素

相关推荐

Enjoyendless / 0评论 2020-06-11

CoderChang / 0评论 2014-06-04