CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
一、定位
position 属性值的含义(摘抄www.w3school.com.cn/css/css_pos…)：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
1、设置了relative，则这个框形成一个单独的层，可以与其他元素框重叠显示。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
1、在没有设置top、left等属性时，位置跟static时的位置一致，但是该元素框下面的元素框会上移到该元素框static的位置，两个元素框重叠
2、并且当前层级较高，压在上面及下面的元素框上，可以通过z-index调整显示层级
3、绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
1、在没有设置top、left等属性时，位置跟static时的位置一致，但是该元素框下面的元素框会上移到该元素框static的位置，两个元素框重叠
2、并且当前层级较高，压在上面及下面的元素框上，可以通过z-index调整显示层级
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
<div class="bank bank1"> <span class="span span1">span1--static</span> bank1--static</div>
<div class="bank bank2"> <span class="span span2">span2--relative;left: 20px;</span> bank2--relative</div>
<div class="bank bank3"> <span class="span span3">span3</span> bank3--absolute;left: 0;top:100px;</div>
<div class="bank bank4"> <span class="span span4">span4</span> bank4</div>
<div class="bank bank5"> <span class="span span5">span5</span> bank5--fixed;top:155px;</div> .bank{
height: 50px;
}
.bank1{
background: red;
width: 200px;
position:static;
}
.bank2{
background: orange;
width: 300px;
position: relative;
}
.bank3{
background: yellowgreen;
width: 400px;
position:absolute;
left: 0;
top:100px;
}
.bank4{
background: green;
}
.bank5{
background: skyblue;
position:fixed;
top:155px;
}
.span{
color: white;
}
.span1{
position: static;
}
.span2{
position: relative;
left: 20px;
}
二、浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
例子：
bank6压在bank7上面，但是bank7内部的位子被挤到了下一行的位置？？？
<div class="bankF bank6">bank6</div>
<div class="bankF bank7">bank7</div>
<div class="bankF bank8">bank8</div> .bank6{
background: blue;
float: left;
}
.bank7{
background: purple;
/* float: left; */
}
.bank8{
background: palevioletred;
/* float: left; */
}
三、应用
1、圣杯布局，为了让浏览器先渲染main板块
<header>header</header>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer> header,
footer {
height: 50px;
background: pink;
}
.wrapper {
padding: 0 100px 0 100px;
overflow: hidden;
}
.col {
position: relative;
float: left;
}
.main {
/* position: relative;
float: left; */
width: 100%;
height: 200px;
background: yellowgreen;
}
.left {
/* position: relative;
float: left; */
width: 100px;
height: 200px;
margin-left: -100%;
left: -100px;
background: purple;
}
.right {
/* position: relative;
float: left; */
width: 100px;
height: 200px;
margin-left: -100px;
right: -100px;
background: blueviolet;
}
原理：使用了 relative 相对定位、float（需要请浮动，此处使用 overflow:hidden; 方法）和 负值 margin ，将 left 和 right 部分「安装」到 wrapper 的两侧，顾名「圣杯」。
缺点：如果将浏览器无线变窄，「圣杯」将会「破碎」掉。如图，当 main 部分的宽小于 left 部分时就会发生布局混乱。
2、双飞翼布局–解决圣杯布局的缺点而诞生
<header>header</header>
<section class="wrapper">
<section class="col main">
<section class="main-wrap">main</section>
</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer> header,
footer {
height: 50px;
background: pink;
}
.wrapper {
padding: 0;
overflow: hidden;
}
.col {
float: left;
}
.main {
width: 100%;
background: yellowgreen;
}
.main-wrap {
margin: 0 100px 0 100px;
height: 200px;
background: red;
}
.left {
width: 100px;
height: 200px;
margin-left: -100%;
background: purple;
}
.right {
width: 100px;
height: 200px;
margin-left: -100px;
background: blueviolet;
}
原理：同样使用了 float 和 负值 margin,不同的是，并没有使用 relative 相对定位 而是增加了 dom 结构，增加了一个层级。
缺点：增加了 dom 结构，增加了一个层级。
3、两列布局–absolute绝对定位
浏览器宽度大于1200px时
浏览器宽度小于1200px时
<div class="content">
<div class="main">main</div>
<div class="left">
<ul>
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
</ul>
</div>
</div> body {
padding: 0;
margin: 0;
}
.content {
width: auto;
max-width: 1200px;
padding-left: 200px;
box-sizing: border-box;
margin: 0 auto;
background: #f3f3f3;
position: relative;
}
.left {
width: 190px;
position: absolute;
top: 0;
left: 0;
background: orangered;
}
.main {
width: 100%;
background: green;
min-height: 200px;
}
4、在3的基础上，在左侧增加底部固定文字，并且底部文字不能覆盖上面的文字
备注：左侧增加高度及最小高度限制——
height: 100%; min-height: 300px; overflow-y: auto;
<div class="content">
<div class="main">
main
<section class="detail">content</section>
</div>
<div class="left">
<ul>
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
<li>11111111111</li>
<li>22222222222</li>
</ul>
<ul class="abs">
<li>底部固定文字列表</li>
<li>dddddd--1111</li>
<li>dddddd--2222</li>
<li>dddddd--3333</li>
<li>dddddd--4444</li>
</ul>
</div>
</div> body {
padding: 0;
margin: 0;
}
.content {
width: auto;
max-width: 1200px;
padding-left: 200px;
box-sizing: border-box;
margin: 0 auto;
background: #f3f3f3;
position: relative;
}
.left {
width: 190px;
position: absolute;
top: 0;
left: 0;
background: orangered;
height: 100%;
min-height: 300px;
overflow-y: auto;
}
.main {
width: 100%;
background: green;
}
.abs {
position: absolute;
bottom: 10px;
}
.detail {
width: 100%;
/* min-height: 300px; */
}
A、当左侧高度大于右侧主题内容高度时
B、当左侧高度小于右侧主题内容高度时
综合实例：cruise.yaya12.com/#/
