-
其中，CSS位置属性可以取5个值：
位置：绝对的
相对位置：
位置：固定
位置：静态
位置：继承
静态是该位置的默认属性值。任何应用位置的元素：静态都在常规文档流中。它是什么位置以及它如何影响周围的元素是由框模型决定的。
静态定位元素忽略所有值的属性声明的顶部，底部，左，右，和z-index.in以便让你的元素来使用这五个属性，你需要将这三个值的位置属性：绝对的，相对的，固定的
具有继承位置值的元素与所有其他属性的继承值相同，元素继承父元素的位置值。
为了更好地回理解，DOM画了这幅素描：
上面的DOM图，我想你一定很容易理解，下面主要是看一下位置的使用。
第一步：立场：静态
在CSS中，所有的元素都是position，和属性的默认值是static由于无需显式地设置每个元素的位置：static在这一点上，你会问，是这个属性意义的价值吗不是真的，他在CSS中也发挥了很大的作用：
For example, your two pages exist at the same time: ldquo; div#div-1; then, you need to locate the ldquo and div#div-1 in the A plane; and ldquo, div#div-1 in the B page, and do not need absolute location.
在一页的div # div-1绝对定位：
CSS代码将内容复制到剪贴板。
{ # div-1
位置：绝对；
}
在这个时候，我们不想定位在B页面的绝对位置，所以必须重置# div-1明确。位置属性static。
CSS代码将内容复制到剪贴板。
B # div-1 {身体。
位置：静态；
}
第二步：相对定位位置：相对
相对称为相对定位。如果你对一个元素的relative分配一个位置，然后你可以通过设置元素的位置值，t-r-b-l（即顶，右，下，左）。
使用相对应注意几点：
当元素被设置为相对时，它相对于元素本身的位置定位。
设置完成后，相对的，可以通过t-r-b-l，和元素的位置发生变化。
后元是建立相对的，如果没有t-r-b-l设置，元素不改变任何位置。
上面的第一点和第三点已经很好理解了，所以对于第二点，我们来看一个实例的操作：
在上述研究的基础上，我们继续以div-1下移20px；向左移动40px：
CSS代码将内容复制到剪贴板。
{ # div-1
职位：相对；
上图：20px；
左：- 40px；
}
让我们看看效果：
上面提到的第二点可以再次证实，从效果图。元素div-1，向下移动20像素移动，移动40px向左，改变他们的位置，和元素的初始物理空间依然存在。其他元素对定位后其他相邻元素无影响。
第三步：绝对定位：绝对位置
绝对值是位置的第三属性值。如果你指定了绝对的元素，整个单元会浮出来的文件流，和元素本身的物理空间将同时消失。与relative它也有原来的物理空间。
让我们在div-1a元素绝对定位的实例看：
CSS代码将内容复制到剪贴板。
{ # div-1a
位置：绝对；
顶部：0；
错误：0；
宽度：200px；
}
元素；div-1a不在原文件流，它也是相对于HTML在这个位置，所以有时我们不需要这个，如果我们想div-1a元素div-1是绝对定位，那该怎么办在这一点上我们要发挥第一步；relative效果。
第四步：相对与绝对的结合
第二步，我们都知道元素的定位相对于relative相对于元素本身的位置，和在第三步中，我们知道元素的绝对位置是absolute相对于HTML。但这仅仅是为了满足这一条件是正常的：任何祖先元素绝对定位的元素没有任何或absoluterelative；参考集，所以绝对定位的元素是html并以这种方式，和relativeabsolute结合；可以发挥很大的作用。
让我们看看下一个截图：
上面的图片为例说明之间的关系，relative和absolute第一，有身体三DIV，和他们的三个div的关系是div-1 > div-2 > div-3，和div-3具有绝对位置。
CSS代码将内容复制到剪贴板。
{。div-3
位置：绝对；
左：0；
顶部：0；
}
这里有几个例子来说明上面的图片的意思。
1、div-1和div-2不设位置：relative此时，我们div-3绝对定位然后漂流的位置，div-3c
2，我们设立了一个relative，位置：在div-2元；当我们的div-3是绝对位置，它会浮在上面的图画div-3a
3，然后改变的相对定位的设置对div-1元，当div-3绝对定位为div-3b位置。
花了这么多时间，我只想指出：如果绝对定位的元素，引用的是自己最近的相对定位的集合元素，如果有一套最近的元素定位，如果找不到它的祖先元素的相对定位元素，HTML已经找到为止。这句话讲像一口，不知道它是什么你能明白我说的吗如果您不理解，您可以参考上面的图片或以下示例效果：
回到上面的例子，如果我们在div-1添加relative
CSS代码将内容复制到剪贴板。
{ # div-1
职位：相对；
}
{ # div-1a
位置：绝对；
顶部：0；
错误：0；
宽度：200px；
}
现在我们将在第三步中，身体却div-1让我们在第三步的变化看：
第五步：相对与绝对实现布局效果
这一步是论证的相对定位和绝对定位的使用两布局。在前人的基础上，div-1是相对定位，并div-1a和div-1b绝对定位来实现两列布局的影响。
CSS代码将内容复制到剪贴板。
{ # div-1
职位：相对；
}
{ # div-1a
位置：绝对；
顶部：0；
错误：0；
宽度：200px；
}
{ # div-1b
位置：绝对；
顶部：0；
左：0；
宽度：200px；
}
这样的生产就是为了说明绝对的作用。如果能达到以上效果，在实际生产中可能不太理想。为了使它更完美，我们将看下一步。
第六步：设置固定高度
为了使布局更为适用，你可以设置一个固定的高度对div-1元素，如：
CSS代码将内容复制到剪贴板。
{ # div-1
职位：相对；
身高：250px；
}
{ # div-1a
位置：绝对；
顶部：0；
错误：0；
宽度：200px；
}
{ # div-1b
位置：绝对；
顶部：0；
左：0；
宽度：200px；
}
相比之下稍微好一点，但我们不知道元素的高度会有多大的分量，所以在这个固定高度设置一个软点是我们的做法，这是不推荐使用个人的。如果我们需要它，我们可以用其他方式来做。
第七步：漂浮
前两个步骤，绝对定位的使用不是很理想，那么我们可以考虑使用浮点数来解决。我们可以使用浮在一个元素上使元素左或右，我们也可以在元素周围使用文本：
CSS代码将内容复制到剪贴板。
{ # div-1a
浮点数：左；
宽度：200px；
}
第八步：多行浮动
上面显示一个列浮动，然后查看多列更改：
CSS代码将内容复制到剪贴板。
{ # div-1a
浮点数：左；
宽度：150px；
}
{ # div-1b
浮点数：左；
宽度：150px；
}
浮动定位和绝对定位相比现在解决了高度自适应的问题，但存在问题，浮动也破坏了原文档流，父元素的崩溃，所以为了解决这个问题，我们需要明确。
第九步：移除浮动
为了使浮动元素的父元素不处于崩溃状态，我们需要删除浮动元素。
CSS代码将内容复制到剪贴板。
{ # div-1a
浮点数：左；
宽度：190px；
}
{ # div-1b
浮点数：左；
宽度：190px；
}
{ # div-1c
清楚：两者；
}