用CSS的位置属性控制页面布局的入门教程
位置属性定义了一个元素在页面的布局和对周围环境影响要素的位置。有此属性5的值：位置：绝对的
相对位置：
位置：固定
位置：静态
位置：继承
本文详细讨论了位置属性的前三个值，首先讨论了下两个值：
静态
静态是位置属性的默认值，静态元素遵循正常的文档流，忽略了顶部、底部、左侧、右侧等属性。
继承
继承值类似于其他CSS属性的继承值，即继承的父元素的位置值。
绝对的
绝对的元素将从正常文档流中分离出来，所以它周围的元素会忽略它的存在。绝对的元素的显示属性设置为无。在这一点上，我们可以使用属性等的顶部，底部，左，右等做出的绝对元素的绝对定位。在一般情况下，定义了两个属性，顶部或底部，左，或右。
这种绝对定位需要理解一点，因为它很容易与相对混淆。
例如，什么元素不留下是当左：10px位置添加元素的绝对事实上，这将是找到父元素绝对元素的第一个，如果父元素的位置值（而不是静态的），然后左：10px基于父元素的定位，否则它将继续寻找父元素的父元素，一直追溯到一个父元素没有静态的位置值，如果没有父元素满足条件，它将根据位置的最外层的窗口。
CSS代码将内容复制到剪贴板。
绝对元素
im是默认元素
忽略绝对元素的存在性。
相对
相对元素如下正常文档流，所以周围的元素，不要忽视它的存在，以及相关的元素也支持属性等的顶部，底部，左，右，等等。当我们使用上，下，左，右和其他属性来定位元素相对比较，其效果是：通过边缘属性的一点点相似，但不同的是，在相对的元素的元素会忽略相对运动元素。我们注意到，当相对元不用于相对定位属性，它将不可忽视，但周围的元素，通过定位属性定位，周围的元素会忽略移动相关元素，他们会认为再相对元素仍然在原来的位置上，不动了，我们用一个例子来说明：
CSS代码将内容复制到剪贴板。
IM是一个相关元素
im是默认元素
不要忽略相关元素的存在。
选择复制到笔记中
CSS代码将内容复制到剪贴板。
IM是一个相关元素
im是默认元素
忽略相关的移动元素
固定的
固定元素将脱离正常的文档流，因此它非常类似于绝对元素。它也会被周围的元素忽略，支持上、下、左、右属性，但它们仍然非常不同。
首先，固定元素位置与父元素无关，它总是相对于最外面的窗口定位。
第二，固定元素，像它的名字，固定在屏幕上的位置，它不会因为屏幕的滚动而消失。
选择复制到笔记中
CSS代码将内容复制到剪贴板。
绝对元素
我是一个固定的元素
im是默认元素
像绝对的，固定的元素也被忽略了。
因为外层div不止一个屏幕，现在我们向下滚动屏幕。
只有固定的/没有消失，因为屏幕滚动，因为它是固定的；
Z指数
你为什么要提z-index属性吗这是因为Z-INDEX属性仅为定位元件，，当位置值是绝对的，相对的，固定的。我们首先了解什么是Z。
从上面的图片中，我们不难发现，z-index值代表该元素的堆叠顺序，和更高的价值，更优先的显示顺序。
CSS代码将内容复制到剪贴板。
绝对元素
我是一个固定的元素
/ /固定元件Z指数高于实际的元素，所以它是在前面所示
（我色调的背景是不透明的，所以我能看得更清楚）。如果z-index值一样会发生什么
CSS代码将内容复制到剪贴板。
绝对元素
我是一个固定的元素
/ / z-index值是相同的，它还表现为固定的元素
所以我们知道当z-index值相同，后加载的元素显示优先级。
一个完整的例子
HTML
xml代码将内容复制到剪贴板。
前一个div
ID = div-1
ID = div-1a
乱数假文悲哀坐特，您adipiscing精英。整数价格队，整数，它被称为对与错。
ID = div-1b
乱数假文悲哀坐特，您adipiscing精英。整数价格队坐特猫。整数坐特直径。phasellus ultrices Viverra velit。南支是UT，必比登科莫多，麦格纳NiSi tincidunt tortor，QUIS accumsan争吵都乱数假文ID。
ID = div-1c
后一个div
简约风格的简单运用：
CSS
CSS代码将内容复制到剪贴板。
{ #例子
浮：错误；
}
#例P {
保证金：0 0.25em；
填料：0.25em 0；
}
# div之前，
{ # div后
背景颜色：# 88d；
颜色：# 000；
}
{ # div-1
宽度：400px；
背景颜色：# 000；
颜色：# FFF；
}
{ # div-1-padding
填料：10px；
}
{ # div-1a
背景颜色：# d33；
颜色：# FFF；
}
{ # div-1b
背景颜色：# 3d3；
颜色：# FFF；
}
{ # div-1c
背景颜色：# 33d；
颜色：# FFF；
}
uff1a效应