<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.box1{
border:1px solid red;
}
.box2{
border:1px solid yellow;
/*position:absolute;*/
/*left:400px;
top:300px;*/
/*bottom:100px;*/
/*right:100px;*/
position:relative;
/*left:400px;
top:300px;*/
bottom:100px;
right:100px;
}
.box3{
width:150px;
height:150px;
border:1px solid blue;
}
#fix{
width: 50px;
height: 150px;
background-color: pink;
position:fixed;
right:50px;
bottom:100px;
}
</style>
</head>
<body>
<!--
定位: position
position:
absolute 绝对定位: 不保留原来的位置, 原点: 浏览器的四个角落
relative 相对定位: 保留原来的位置, 原点: 相对于原来的位置
fixed 固定定位: 不保留原来的位置 原点: 浏览器的四个角落
-->
<div id='fix' ></div>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
<div class='box3'></div>
</body>
</html>
定位绝对定位，相对定位，固定定位
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
