HTML和CSS高级指南之二—定位详解

position属性

HTML和CSS高级指南之二——定位详解

[Learn to Code Advanced
HTML & CSS - Detailed Positioning](http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/)

static

默认属性会被覆盖，无位置属性设置(top,right,bottom,left)

relative

应用position: relative的是父元素，子元素可以通过(top,right,bottom,left)来控制子元素相对于父元素在文档流的位置。

absolute

绝对定位会脱离文档流，绝对定位需要至少一个父元素设置了position: relative/absolute。

使用绝对定位的元素可以指定垂直和水平的位移属性，使绝对定位元素相对于设置了相对定位的祖先元素边缘进行移位。

fixed

固定定位类似于绝对定位，但是它定位是相对于浏览器窗口，不会随滚动条滚动而动，从而适中固定在浏览器的一个方位。
常用于<header>和<footer>

Z-Index(位置属性)

Z轴定义元素的层叠顺序。一般来说，在DOM中，元素出现的时候就放置在z轴上。在Dom中，元素在顶部的要低于底部的。改变这种层叠顺序可以直接使用“z-index”来控制。元素的“z-index”值越高将会出现在越上面，不管元素在Dom哪个位置上。

先决条件：position属性为:relative/absolute/fixed

CSS居中方法

Centering in CSS: A Complete Guide

水平居中

行内元素

.center-children {
  text-align: center;
}

块级元素

.center-block {
  margin: 0 auto;
}

不止有一个块级元素

• 在同一行显示

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

/*flex方法实现*/
.flex-center {
  display: flex;
  justify-content: center;
}

• 在同一列显示

main div {
  margin: 0 auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}

垂直居中

行内元素

• 单行

padding-top = padding-bottom

/*trick*/
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

• 多行

.center-table p {
  display: table-cell;
  vertical-align: middle;
}

/*flex方法实现*/
.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

块级元素

• 知道元素的高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
  /*如果没用box-sizing、border-box，需计算padding和border*/
}

• 未知高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/*flex方法实现*/
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

垂直水平居中

• 元素固定高和宽

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

• 未知高和宽

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*flex方法实现*/
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}