position：定位
普通流：
- CSS 里一切 HTML 元素皆为盒子，也就是通常所说的
盒模型。 - 块级元素自动从新的一行开始（比如标题、段落以及 div），
- 行内元素排列在上一个元素后（比如图片以及 span）。
- 元素默认按照这种方式布局称为文档的
普通流CSS 提供了 position 属性来覆盖普通流。
realative 相对定位
- position :
relative指定元素在基于普通流页面的相对偏移量。- 四个方向：
left、right、top和bottom。 - 它们代表着距离原来的位置的偏移量
- 比如：left：50px 意味着相对于原来位置向右移动了 50px
- 四个方向：
注意：元素的 position 设置成 relative， 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响
像这样–
absolute 绝对定位
absolute相对于其包含块定位。包含它的父级块级元素- 和
relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 - 同样可用 top、bottom、left 和 right 属性来调整元素的位置。
absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。- 如果它的父元素没有添加定位规则（默认是
position:relative;）,浏览器会继续寻找直到默认的<body>标签。
fixed 较于浏览器窗口定位
- 它是一种特殊的 absolute 定位，区别是其包含块是浏览器窗口。
- 因此，
fixed定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。 fixed定位元素不会随着屏幕滚动而移动。
float 属性：浮动定位
- 它并不是
position属性的选项，而是单独的float属性。 - 浮动元素不在文档流中,为一个元素设置 float 会将其从文档流清出去
- 它向左**或**向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 通常需要用
width属性来指定浮动元素占据的水平空间。
z-index：调整元素堆叠次序
- 当元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面
- 使用
z-index属性指定元素的堆叠次序。 z-index的取值是整数，数值大的元素优先于数值小的元素显示。
使用 margin 属性将元素水平居中
- 块级元素的水平居中：将其
margin值设置为auto。同样的让图片水平居中：
- 图片默认是内联元素，但可以先设置其
display属性为block来把它变成块级元素。然后再设置
评论