position属性
[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居中方法
水平居中
行内元素
.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;
}