CSS有三种基本的定位机制：普通流（文档流），定位和浮动
- <strong>普通流</strong>：普通流中元素框的位置由元素在 XHTML 中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直 margin 计算得到。行内元素在一行中水平布置。
- <strong>定位</strong>：
① <strong>无定位（position:static）</strong>：默认值。没有定位，元素出现在正常的流中（忽略 top,bottom,left,right 或者 z-index 的声明）
② <strong>相对定位（position:relative）</strong>：定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素<u>不管它是否进行移动，元素仍占据它原来的位置（空间）</u>，但移动元素会使该元素覆盖其他的框。如"left:20px”会向元素的 LEFT 位置添加 20 像素。
下面我给了一个例子，可以发现在定位前后，粉框所占据的空间并没有改变，但是粉框覆盖到了黄框上。
③ <strong>绝对定位（position:absolute）</strong>：绝对定位的元素位置是相对于距离他最近的那个<u>已经定位的父级元素（相对/绝对）来决定的</u>。如果自身父级元素没有定位，则往更上级的有定位的父级元素，如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body 或html 类似的）元素。以此类推。<u>绝对定位使元素与文档流无关， 因此不占据空间</u>。
普通文档流中其他的元素的布局不受绝对定位元素的影响。就等同于绝对定位的元素不存在一样。
ps: 由于绝对定位的元素脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置 z-Iindex 属性来控制这些框的堆放次序。
下面我举了一个例子，我们可以看到对粉框定位后，它下面的黄框上移占据了粉框原本的位置， 仿佛粉框不存在一般。
④ <strong>固定定位（position:fixed）</strong>：固定定位是绝对定位的一种，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。固定定位的元素也不包含在普通文档流中，差异是固定元素的包含块儿是视口（viewport）。
- <strong>浮动</strong>：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 <u>由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样</u>。
如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动元素向下移动，直到有足够多的空间。如果浮动元素的高度不同，那么当它们向下移动时可能会被其他浮动元素卡住。
行内元素会围绕着浮动框排列。例子如下图：
1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流中的元素的位置由元素在 (X)HTML 中的位置决定。
- 通过定位与浮动的方法可以让元素脱离文档流。
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
<strong>共有四种定位方式</strong>：普通流，相对定位，绝对定位和固定定位。
- 相对定位（position:relative）：定位元素的位置相对于它在普通流中的位置进行移动。用于
- 绝对定位（position:absolute）：绝对定位的元素位置是相对于距离他最近的那个已经定位的父级元素（相对/绝对）来决定的。用于九宫格效果，整体布局等。
- 固定定位（position:fixed）：固定定位是绝对定位的一种，相对于浏览器窗口进行定位。用于广告栏之类的固定位置使用。
参考：CSS绝对定位的应用
3.absolute, relative, fixed 偏移的参考点分别是什么
- absolute 参考点是相对于 static 定位以外的第一个已经定位的父级元素（相对/绝对）来决定的。
- relative 参考点是相对于其正常位置进行定位。
- fixed 参考点是相对于浏览器窗口进行定位。
4. z-index 有什么作用? 如何使用?
z-index：针对网页显示中的一个特殊属性，为了表示三维立体的概念如元素的上下层的叠加顺序引入了 z-index 属性来表示 Z 轴。<strong>但其只对定位元素有效。</strong>下面是不同场景下的显示顺序：
① z-index 值：值较大的元素将叠加在 z-index 值较小的元素之上，正数值将叠加在负数值得对象上。
②相同 z-index 的叠加顺序：
- 如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index 相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
- 如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素。
③父子关系处理：
- 如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方，即使是子元素的 z-index 值比父元素小，也会出现在父元素上方。
- 如果父元素z-index 失效（未定位或者使用默认值），那么定位子元素的 z-index 设置生效。
④兄弟之间子元素叠加顺序：由其父元素决定，父元素值高的叠加低的，不管子元素 z-index 值得大小。
5.position:relative 和负 margin 都可以使元素位置发生偏移?二者有什么区别
position:relative 和负 margin 都可以使元素位置发生偏移。
- position:relative 的偏移所产生的结果是该元素仍占据它原来的位置（空间），但移动元素会使该元素覆盖其他的框，也就是说不会影响整体的布局。
- 负 margin 的偏移所产生的结果是带动该元素周围的元素一起移动，也就是该元素不占据原来的位置，而是真的发生了偏移改变了布局。
下面我给出了两个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.text1,
.text3 {
background-color: yellow;
width: 150px;
height: 100px;
margin: 0;
}
.text2 {
background-color: pink;
margin-top: 3px;
width: 150px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="text1"></div>
<div class="text2"></div>
<a href="#">这是一个链接</a>
<div class="text3"></div>
</body>
</html>
在该代码的基础上我添加了 position:relative 命令，使其在左方与下方分别增加了-30px。结果如下图，我们可以发现 position:relative 命令所带来的结果并不会改变 a 链接的位置发生任何变化。
在初始代码的基础上我又添加了负 margin 的命令，使其在左方与下方分别移动了 -30px。结果如下图，我们可以发现负 margin 命令所带来的结果不仅让
a 元素的位置发生的变化，使得下方的 div 黄框也上移了。
<strong>总结</strong>：position:relative 的偏移不会带动周围元素的偏移，因为其元素仍占据该元素本来的位置。而负 margin 的偏移会带来周围元素的偏移。
6.如何让一个固定宽高的元素在页面上垂直水平居中?
利用 position:absolute 与负 margin 来实现。具体如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.ct{
position: relative;
height: 500px;
background-color: #eee;
}
.box{
position: absolute;
top: 50%;
left: 50%;
margin: -50px;
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box"></div>
</div>
</body>
</html>
所以我们得到如下图的结果，有宽高的 div 垂直水平居中了。
7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
对于不同的情况我举了几个例子：
- 正常形况下不浮动如下图。
- 第一个框向右浮动，第二个框会顶上它的位置，效果如图。
- 第一个框向左浮动，因为 box1 脱离文档流，z-index值高，所以覆盖 box2。效果如图。
- 三个框均向左浮动，在包含快空间足够的情况下依次排列，否则包含块太窄无法容纳水平排列三个浮动元素，那么其他浮动块向下移动。两个效果如下图。
- 若浮动元素的高度不同，那么向下移动的时候可能会被卡住。效果如图。
- 浮动会让元素脱离文档流,不影响不浮动元素。效果如图。
- 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间，也就是常见的文字环绕。效果如图。
参考：课件-浮动
8.清除浮动指什么? 如何清除浮动?
浮动元素引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清楚浮动实际上为前面的浮动元素留出了垂直空间，也可以解决上面问题中的第二个问题与第三个问题。
语法：clear : none | left | right | both
- none：默认值。允许两边都可以有浮动对象
- left：不允许左边有浮动对象
- right：不允许右边有浮动对象
- both：不允许有浮动对象
清除浮动的应用我们可以直接从上个问题中的文字环绕来解答。在我们没有清楚浮动时，我们的文字是围绕着浮动元素，那么我们添加了去除浮动（代码如下），可以得到如下图结果。
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.ct {
width: 300px;
height: 300px;
border: 2px solid #eee;
}
.box1 {
float: left;
height: 50px;
width: 100px;
background-color: pink;
}
.box2 {
clear: both;
height: 100px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2">
如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在
</div>
</div>
</body>
</html>
<strong>本文版权归作者和饥人谷所有，转载请注明出处
