CSS 定位令你可以将一个元素精确地放在页面上你所指定的地方。
absolute 绝对定位
脱离原位置进行定位
下面举个绝对定位的例子 ：
在文档的四个角落各放四个盒子
html代码段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="absolute.css">
<title>绝对定位</title>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</body>
</html>
css代码段
div{
width:100px;
height:100px;
text-align:center;
}
#box1{
position:absolute;
top:50px;
left:50px;
background-color: darkred;
}
#box2{
position:absolute;
top:50px;
right:50px;
background-color: orange;
}
#box3{
position: absolute;
bottom:50px;
left:50px;
background-color: yellow;
}
#box4{
position: absolute;
bottom: 50px;
right:50px;
background-color: green;
}
效果图
relative 相对定位
保留原位置进行定位
其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。
举例
我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位
html代码段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="absolute.css">
<title>相对定位</title>
</head>
<body>
<p>
<div id="dog1">
<img src="萌宠.jpg" alt="萌宠" titile="萌宠">
</div>
</p>
<p>
<div id="dog2">
<img src="萌宠.jpg" alt="萌宠" titile="萌宠">
</div>
</p>
<p>
<div id="dog3">
<img src="萌宠.jpg" alt="萌宠" titile="萌宠">
</div>
</p>
</body>
</html>
css代码段
#dog1{
position:relative;
left:35px;
bottom:15px;
}
#dog2{
position:relative;
left:35px;
bottom:50px;
}
#dog3{
position: relative;
left:10px;
bottom:70px;
}
效果图
