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>