Css绝对定位position
1、使用条件
通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。
2、如下
div#in_1{ position: absolute; right: 20px; top: 30px; } 这里定义了距离父级右侧距离为20px,距离父级上边距离为30px
div#in_2{ position: absolute; left: 40px; bottom: 10px; } 这里定义了距离父级左侧距离为40px,距离父级下边距离为10px
3、注意
left(左)和right(右)在一个对象只能选一种定义,bottom(下)和top(上)也是在一个对象只能选一种定义。
4、Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div#out{
border: 1px solid black;
position: relative;
width: 400px;
height: 400px;
margin: 40px;
}
div#in_1{
border: 1px solid red;
position: absolute;
right: 20px;
top: 30px;
}
div#in_2{
border: 1px solid #7fffd4;
position: absolute;
left: 40px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="out">
我是最外面的DIV out
<div id="in_1">
我是里面的DIV in_1
</div>
<div id="in_2">
我是里面的DIV in_2
</div>
</div>
</body>
</html>