收藏
批改状态：合格
老师批语：记得写上作业标题, 代码要放在代码块中提交, 当天的作业要放在一个博客中提交
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
