div分层
从上到下：文字内容（内联子元素） - 浮动元素，块级子元素 - border - background
div的层级关系遵从前后顺序，后面的会盖住先前的文字。
position
static：默认值，文档流内
relative：升起，但不脱离文档流，常作为absolute的父元素使用。可配合z-index使用
absolute：绝对定位，脱离原本的位置，需要有一个不为static的父元素作为基准的定位元素（多半是relative）。
对话框的关闭按钮，鼠标提示都可用absolute做。
e.g. 鼠标悬停显示提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
button {
position: relative;
}
button span {
position: absolute;
border: 1px solid black;
white-space: nowrap;
bottom: calc(100% + 15px); /* 块高度 + 15px */
left: 50%; /* 移动至宽度50%处 */
transform: translateX(-50%); /* 居中对齐 */
}
button span{
display: none; /* 未点击时隐藏 */
}
button:hover span{
display: inline-block; /* 鼠标悬停时显示 */
}
</style>
</head>
<body>
<div style="height:100px;"></div>
<button>点击查看提示
<span class="tips">我是一行提示</span>
</button>
</body>
</html>
tips: 关于:hover
鼠标悬停在元素上时会触发。但只对可视客户端有效，在触摸屏上无效。
fixed：固定定位，基于viewport定位。
问题：并非永远基于viewport，如果父元素里含有transform属性，则fixed基于父元素而非viewport定位。
可用于做回到顶部按钮和烦死人的广告。
手机上的bug非常多最好不要使用。
sticky：粘滞定位，黏在哪里滚动之后还会位于相对的前方或者后方。支持性很差。
tips: 文字内容不准换行
添加css属性white-space
white-space: nowrap;
