标签：css定位
一、CSS定位：改变元素在页面上的位置
二、CSS定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
三、CSS定位属性：
1. position 把元素放在一个静态的、相对的、绝对的、或固定的位置中
四个属性：
static 静态（偏移量对它不起效果）
relative 相对定位
absolute 绝对定位
fixed 固定（不随滚动条滚动而滚动）
偏移量：
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<link href="style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="position1"></div>
<script>
for(var i=0; i<100; i++){
document.write(i+"<br/>");
}
</script>
</body>
</html>#position1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 100px;
top: 100px;
}
2. z-index 设置元素的堆叠顺序
#position1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 100px;
top: 100px;
z-index: 2;
}
#position2{
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
left: 110px;
top: 70px;
z-index: 1;
}z-index:值 谁的值大谁就在前面显示
这个值没有限制，可以随便设置，但是尽量在100以内
不单单相对布局存在这个问题，绝对布局也是存在的
3. overflow 设置元素溢出区域发生的事情
4. clip 设置元素显示的形状
5. vertical-align 设置元素垂直对齐方式
标签：css定位
原文地址：http://11317783.blog.51cto.com/11307783/1772836
