CSS定位

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;
width:500px;
height:300px;
border: 3px solid black;
}
.div2{
position:absolute;
top:90px;
left:80px;
height:100px;
border: 3px solid black;
}

效果视图:

posted @ 2018-10-25 19:56  毕竟是家黑店  阅读(129)  评论(0编辑  收藏  举报