CSS的定位是使用的position这个标识,总共分为static、absolute、relative、fixed四种类型。
它们分别的翻译是:静态的,绝对的,相对的,补充的(有多种翻译)。
我在学习中大致认为,一般来说absolute和relative是协同使用的,用它们可以实现两种对象的相对重叠。
fixed的属性似乎较为活动,受限制教少。
下面举个例子:
1.relative和absolute的叠加使用。
html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="div1">
<p1>这是绝对定位的方框。
</div>
<div class="div2">
<p2>这是相对定位的方框。
</div>
</body>
CSS:
.div1{
position:relative;
500px;
height:300px;
border: 3px solid black;
}
.div2{
position:absolute;
top:90px;
left:80px;
height:100px;
border: 3px solid black;
}
效果视图: