目录
(接上一期知识,咱们继续讲解。)
一、相对定位
relative:可以理解为相对于自身定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid;
margin-top: 100px;
}
.first{
width: 200px;
height: 100px;
border: 1px solid blue;
position: relative;
left: 320px;
bottom: 100px;
}
.second{
width: 100px;
height: 50px;
border: 1px solid red;
float: left;
}
.third{
width: 200px;
height: 50px;
border: 1px solid green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
效果如下图:

这篇博客详细介绍了CSS中的四种定位方式:相对定位、绝对定位、固定定位和粘性定位。相对定位是相对于自身定位,绝对定位依据最近已定位的祖先元素,固定定位相对于浏览器窗口定位,而粘性定位则是在特定阈值前表现为相对定位,之后变为固定定位。这些定位方式在网页制作,尤其是导航栏设计中起到关键作用。
最低0.47元/天 解锁文章
735

被折叠的 条评论
为什么被折叠?



