CSS_定位_CSS 绝对定位_傲亚开放平台

CSS

概论

框模型

样式

定位

选择器

CSS 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

<style>
.box{ 
  widht:300px;
  height:200px;
  margin:50px;
  position:relative;//相对定位
}
.list{
  widht:300px;
  height:200px;
  position:absolute;//绝对定位 因为父级元素 box 存在相对定位，因此 list元素相对于box元素定位
  left:30px;
  top:30px;
}
</style>
<body>
    <div class='box'>
         <div class='list'></div>
    </div>
</body>

<style>
.box{ 
  widht:300px;
  height:200px;
  margin:50px;
}
.list{
  widht:300px;
  height:200px;
  position:absolute;//绝对定位 因为父级元素 box 不存在相对定位，因此 list元素相对于body定位
  left:30px;
  top:30px;
}
</style>
<body>
    <div class='box'>
         <div class='list'></div>
    </div>
</body>

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

#box1 {
  width:100px;
  height:100px;
  position: absolute;
  left: 30px;
  top: 20px;
  z-index:2;
}

#box2 {
  width:100px;
  height:100px;
  position: absolute;
  left: 30px;
  top: 20px;
  z-index:2;
}

//假设 #box1 元素写在 #box2 前面 根据当前css 属性，#box2元素将会覆盖#box1 元素。
//z-index  可以控制元素的堆放顺序，当两个元素的z-index 相同时，则判断父级元素的z-index 属性大小。当父级元素不存在z-index属性时，则判断 两个元素的先后顺序