CSS定位机制

CSS布局——定位机制

CSS中，存在三种定位机制：

• 文档流flow
• 浮动float
• 层layer

1.文档流定位

元素分类：

• block：单独占用一行，height,width,margin,padding都可设置
• inline：不单独占用一行，height,width不可设置
• inline-block：不单独占用一行，height,width,margin,padding都可设置

#elemId {
    display: block;
}

2.浮动定位

#elemId {
    float: left;
}

float取值：left, right

清除浮动（不允许元素左侧/右侧出现浮动元素）

#elemId {
    clear: left;
}

clear取值：both, left, right, none

3.层定位

position属性

• static无定位
• fixed固定定位
• relative相对定位
• absolute绝对定位

位置设定

• left
• right
• top
• botton
  absolute绝对定位

位置设定

• left
• right
• top
• botton
• z-index(前后叠加顺序，值大的在上面)