<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
body{
height: 3000px;
}
#box1{
width: 200px;
height: 200px;
background: #000;
position: relative;
left: 30px;
top: 40px;
}
#box2{
width: 300px;
height: 300px;
background: yellow;
position: absolute;
left:50px;
top: 50px;
}
#box3{
width: 300px;
height: 300px;
background: yellow;
position: fixed;
left:50px;
top: 50px;
}
</style>
</head>
<body>
<!--
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
-->
<!--相对定位-->
<!--<div id="box1"></div>-->
<!--绝对定位-->
<!--<div id="box2"></div>-->
<!-- 固定定位-->
<div id="box3"></div>
</body>
</html>
博客列表 >4. 相对定位与绝对定位的区别与联系,并实例演示
4. 相对定位与绝对定位的区别与联系,并实例演示
- 锋芒天下的博客原创转载
- 2019年07月08日 09:44:011169浏览
上一条：固定定位案例下一条：交作业3：CSS简介与盒模型（2019-7-3）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议