关于定位
相对定位
相对定位是参照于元素在文档流中位置来定位的。
position：relative 不会脱离文档流，占据空间。
相对定位会提升元素的层级，但并没有脱离文档流。※
相对定位不会改变元素的性质，块还是块，行内元素还是行内元素。
绝对定位
绝对定位的特点：
1.开启绝对定位后，不设置偏移量，元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的默认宽高被内容撑开（块在文档 流中时，只是高度被内容撑开，而宽度是默认100%继承父元素）
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于包含块进行定位的（找坐标轴原点的过程）
包含块（containing block）：离当前元素最近的祖先块元素
- 绝对定位元素的包含块是离它最近的开启了定位的祖先元素，如果所有的父元素都没有开启定位，则相对于根元素（html 初始包含块）进行定位。
- 添加position:absolute;浮动不起作用
- 添加position:absolute;margin的auto值不起作用
粘性定位
position：sticky；和相对定位的特点基本一致，
不同的是粘滞定位可以在元素到达某个位置时将其固定。
固定定位的元素不会随网页的滚动条滚动而改变位置。（小广告）
position:sticky（ position:relative 和 position:fixed;的组合使用）
固定定位
固定定位也是一种绝对定位，所以其特点大部分和绝对定位一样。
唯一不同的是固定定位永远参照浏览器的视口（可视窗口）进行定位。
超长banner图如何居中
操作详解：
版心元素相对定位，banner图片绝对定位，先left：50%找到版心的中点，再量出banner的一半是多少，然后margin-left：-960px；使banner图的中点与版心的中点重合，最外层的父容器要设置overflow-x：hidden；可以让banner水平方向上多出的部分隐藏。
<style>
*{
margin:0;
padding:0;
}
#banner{
background:#ccc;
overflow-x: hidden;
}
.banner-con{
width:1000px;
height:600px;
background:pink;
margin:0 auto;
position: relative;
}
.banner-con img{
position:absolute;
left:50%;
margin-left:-960px;
}
</style>
</head>
<body>
<!-- banner -->
<div id="banner">
<div class="banner-con">
<img src="./images/banner.jpg" alt="">
</div>
</div>
</body>
- 定位提升的层级要比浮动高。
- 浮动提升层级半层，定位提升一级。
一个元素分两层，上层是文字相关的东西，下层是盒模型相关的东西。（只在浮动的时候这么考虑）
定位都是一个层级一个层级的提升。（把文字相关的和盒模型相关的两层一块提升上去）