css相对定位与绝对定位的理解

最新推荐文章于 2024-04-12 05:28:38 发布

可乐猫哈

最新推荐文章于 2024-04-12 05:28:38 发布

阅读量383

点赞数 1

本文链接：https://blog.csdn.net/qq_39027256/article/details/77982700

版权

css元素的相对定位和绝对定位：

相对定位：当元素采用相对定位时，它会首先出现在原来的位置，然后通过top，left...等属性相对于原来的位置进行偏移，并且会占据原来的位置空间和偏移覆盖的空间。

绝对定位：当元素采用绝对定位时，元素会脱离文档流，既不会占据空间，然后通过top，left...等属性相对于离它最近并且采用相对定位的父级元素进行偏移。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>???????</title>
<style type="text/css">
.div1{
height:100px;
width:1000px;
background:red;
position:relative;
}
.div2{
height:50;
width:1000px;
background:red;
position:absolute;
margin-top:20px;
}
.div3{
height:200px;
width:1000px;
background:red;
position:absolute;
margin-top:80px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</body>
</html>

可乐猫哈

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css相对定位与绝对定位的理解

css元素的相对定位和绝对定位：相对定位：当元素采用相对定位时，它会首先出现在原来的位置，然后通过top，left...等属性相对于原来的位置进行偏移，并且会占据原来的位置空间和偏移覆盖的空间。绝对定位：当元素采用绝对定位时，元素会脱离文档流，既不会占据空间，然后通过top，left...等属性相对于离它最近并且采用相对定位的父级元素进行偏移。 p
复制链接

扫一扫