在 CSS 中常见的位置 (position) 属性有以下几种：
position
top
right
left
bottom
overflow
z-index
position
position 属性制定出要用哪一类的位置。可能的值有：
static (预设值): 这代表元素会被放在预设的地方。如果 position 的值是被设定为 statics 的话，那 top、bottom、left、和 right 的值就都没有意义了。
absolute: 这代表元素会被放在浏览器内的某个位置 (依 top、bottom、left、和 right 的值而定)。当使用者将网页往下拉时，元素也会跟著改变位置。
relative: 这代表元素被放的地方将会与预设的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
fixed: 这代表元素会被放在浏览器内的某个位置 (依 top、bottom、left、和 right 的值而定)。当使用者将网页往下拉时，元素的位置不会改变。
top, right, bottom, left
每一个方向 (top, right, bottom, left) 的位置值可以是长度、百分比、或是 auto。
让我们来看个例子：
css代码
div {
background-color:#FF00FF;
width:500px;
height:60px;
}
p {
position:relative;
top:10px;
left:50px;
}html代码
<div> <p>举例文字。 </div>
效果
舉例文字。
请注意以上文字的位置：它是在离粉红色方块上面 10px，及左边 50px 的地方。
overflow
overflow 属性是用来设定当内容放不下时的处理方式。可能的值包括：
visible: 内容完全呈现，不管放得下放不下。
hidden: 放不下的内容就不显示出来。
scroll: 无论内容放得下放不下，都加入上下卷轴及左右卷轴的功能。
auto: 当内容放不下时，加上卷轴的功能。
z-index
z-index 属性是用来决定元素重叠的顺序。换言之，当两个元素有重叠的情况时，z-index 值将会决定哪一个元素在上面。z-index 值比较大个元素会被放在上面。
举例来说，假设我们有以下的 CSS 码：
#redblock {
z-index: 1;
position:
absolute;
width:80px;
height:100px;
top:20px;
left:20px;
border: 1px solid #FFF;
background-color: #FF0000;
}
#pinkblock {
z-index: 2;
position: absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border: 1px solid #FFF;
background-color: #FF00FF;
}以下的 HTML 代码
<div id="redblock"></div> <div id="pinkblock"></div>
效果如下
从以上可见，粉红色方块 (pinkblock) 的 z-index 值 (2) 比红色方块 (redblock) 的 z-index 值 (1) 高，因此粉红色方块在上面。
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程