position:absolute:相对,position:relative;绝对定位,position:static静态默认定位,position:fixed固定定位。
默认定位就是原来的位置不发生改变,fixed固定定位参照物是整个文档也就是说整个网页,
相对定位和绝对定位是一对,必须一块使用才能有效果,用相对定位的那一个块,参照物是绝对定位的那一块,
用top。left,right,bottom定位他的上左右下位置。
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<meta charset="utf-8">
<style type="text/css">
#d1{
width: 200px;
height: 400px;
background-color: blue;
position:relative;
}
#d2{
width: 300px;
height: 400px;
background-color: pink;
position:absolute;
top: 10px;
r
}
</style>
</head>
<body>
<div id="d1">
123
</div>
<div id="d2">456</div>
</body>
</html>
要注意的是
在没有父元素镶套的情况下他的相对定位参照对象是body,他的上一级。
镶套后他的参照物就是d1了,没有body默认外边距的8px;