1、属性的定义
relative: 位置被设置为 relative(相对定位) 的元素,可将其移至相对于其正常位置的地方,因此 "left:20px" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute:位置设置为 absolute (绝对定位)的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed: 位置被设置为 fixed(固定定位) 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。
2、技巧:
relative:用这个属性最好先不定位,先找到其正常该出现的位置,再定位!
absolute:
a、看包含它的元素有没有定位,如果没有定位则按照body来定位;如果包含它的元素(div)已经定位,则按照该元素(div)来进行定位。
b、默认大小是被其内容(或其包含的元素撑大)
以下附上自己的实验代码,以供参考!!
(按照标注的步骤解开相应的代码,并注释其他步骤的代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative属性的实例</title>
<style type="text/css">
/*第一步*/
/*div#div2 {
border: 1px solid red;
}*/
/*第二步*/
/*div#div2 {
position: relative;
top: 10px;
left: 100px;
border: 1px solid red;
}*/
/*第三步*/
/*div#div0{
position: relative;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第四步*/
/*div#div2 {
border: 1px solid red;
}
div#div0{
position: relative;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第五步*/
div#div2 {
position: relative;
top: 10px;
left: 100px;
border: 1px solid red;
}
div#div0{
position: relative;
top: 10px;
left: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
123123
</div>
<div id="div2">
asdasd
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>absolute属性的实例</title>
<style type="text/css">
/*第一步*/
/*div#div2 {
border: 1px solid red;
}*/
/*第二步*/
/*div#div2 {
position: absolute;
top: 10px;
left: 100px;
border: 1px solid red;
}*/
/*第三步*/
/*div#div2 {
position: absolute;
top: 10px;
left: 100px;
border: 1px solid red;
}*/
/*第四步*/
/*div#div0{
position: absolute;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第五步*/
/*div#div2 {
border: 1px solid red;
}
div#div0{
position: absolute;
top: 10px;
left: 100px;
border: 1px solid blue;
}*/
/*第六步*/
div#div2 {
position: absolute;
top: 10px;
left: 100px;
border: 1px solid red;
}
div#div0{
position: absolute;
top: 10px;
left: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<!--第三步-->
<div>
12312312313
</div>
<div id="div0">
<div id="div1">
123123
</div>
<div id="div2">
asdasd
</div>
</div>
</body>
</html>