本文深入探讨了HTML布局中相对与绝对定位元素的区别，通过实例展示了元素定位方式对页面布局的影响，包括如何使用left、right、top、bottom属性与margin属性进行布局，以及它们之间的相互作用。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="position:absolute">
<!--总结： 相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right;
Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。-->
<div style="background-color: bisque; width: 300px; height: 300px;">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
<div style="background-color: blue; width: 100px; height: 100px;">
</div>
<div style="background-color: gray; width: 100px; height: 100px;">
</div>
</div>
<!--仅使用left、right、top和bottom属性布局相对定位元素的情况-->
<!--元素原本所占的占位空间仍保留，物理空间偏移-->
<div style="background-color: coral; width: 300px; height: 300px; position: absolute; left: 300px; top: 0px; ">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
<!--position: relative 使用相对定位，3个div都在文档留中，该div设置像素相对于文档流中个上一个元素-->
<div style="background-color: blue; width: 100px; height: 100px; position: relative; top: -60px; left: 80px;">
</div>
<div style="background-color: gray; width: 100px; height: 100px;">
</div>
</div>
<!--仅使用margin属性布局相对定位元素的情况-->
<div style="background-color: bisque; width: 300px; height: 300px; position: absolute; left: 600px; top: 0px; ">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
<!--用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置-->
<!--会影响下一个文档流中个元素的位置-->
<div style="background-color: blue; width: 100px; height: 100px; position: relative; margin-top:30px;margin-left:30px;">
</div>
<div style="background-color: gray; width: 100px; height: 100px; position: relative; ">
</div>
</div>
<div style="background-color: coral; width: 300px; height: 300px; position: absolute; left: 900px; top: 0px; ">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
<!--margin-left上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(-->
<div style="background-color: blue; width: 100px; height: 100px; position: relative; margin-top: 30px; left:30px; margin-left: 30px;top:20px; ">
</div>
<!--设置相对定位后（position: relative;）相对于文档流中上一个元素，重叠部分会覆盖上一个元素-->
<div style="background-color: gray; width: 100px; height: 100px; position: relative; ">
</div>
</div>
<!--仅使用left、right、top和bottom属性布局绝对定位元素的情况-->
<!--绝对定位元素脱离了文档流，以最近的定位祖先（蓝色框）为参照物。-->
<div style="background-color: bisque; width: 300px; height: 300px; position: absolute; left: 1200px; top: 0px; ">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
<!--该元素设置了定位（可以设置相对定位或者是绝对定位），所以使用该元素为参照物-->
<div style="background-color: blue; width: 100px; height: 100px; position: relative; ">
<div style="background-color: darkgrey; width: 50px; height: 50px; position: absolute; margin-top: 30px; margin-left: 30px; ">
</div>
</div>
<div style="background-color: gray; width: 100px; height: 100px;">
</div>
</div>
<!--该元素为最近使用定位祖先，所以使用该元素是参照物-->
<div style="background-color: coral; width: 300px; height: 300px; position: absolute; left: 0px; top: 300px; ">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
<!--该元素没有设置设置了定位（可以设置相对定位或者是绝对定位），所以使用该元素不是参照物-->
<div style="background-color: blue; width: 100px; height: 100px; ">
<div style="background-color: darkgrey; width: 100px; height: 100px; position: absolute; top: 30px; left: 30px;">
<div style="background-color: darkorange; width: 80px; height: 80px; position: relative; top: 30px; left: 30px;">
</div>
</div>
</div>
<div style="background-color: gray; width: 100px; height: 100px;">
</div>
</div>
<div style="background-color: bisque; width: 300px; height: 300px; position: absolute; left: 300px; top: 300px; ">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
<!--该元素没有设置设置了定位（可以设置相对定位或者是绝对定位），所以使用该元素不是参照物-->
<div style="background-color: blue; width: 100px; height: 100px; ">
<div style="background-color: darkgrey; width: 100px; height: 100px; position: absolute; top: 30px; left: 30px;">
<div style="background-color: darkorange; width: 80px; height: 80px; position: relative; margin-top: 30px; margin-left: 30px; ">
</div>
</div>
</div>
<div style="background-color: gray; width: 100px; height: 100px;">
</div>
</div>
<div style="background-color: coral; width: 300px; height: 300px; position: absolute; left: 600px; top: 300px; ">
<div style="background-color: red; width: 100px; height: 100px; ">
</div>
<!--该元素没有设置设置了定位（可以设置相对定位或者是绝对定位），所以使用该元素不是参照物-->
<div style="background-color: blue; width: 100px; height: 100px; ">
<div style="background-color: darkgrey; width: 100px; height: 100px; position: relative; top: 30px; left: 30px;">
<!--所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，
并且它们之间没有非空内容、Padding或Border分隔。 这就是原因了。“嵌套”的盒元素也算“毗邻”，也会 Collapsing Margins。
这个合并Margin其实很常见，就是文章段落元素-->
<div style="background-color: darkorange; width: 80px; height: 80px; position: relative; margin-top: 30px; margin-left:40px; ">
</div>
</div>
</div>
<div style="background-color: gray; width: 100px; height: 100px;">
</div>
</div>
</body>
</html>CSS 绝对定位和相对定位
最新推荐文章于 2025-05-18 20:58:27 发布
扫一扫
1945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
