元素定位，absolute，border，子节点margin-top

最新推荐文章于 2023-01-04 11:36:49 发布

qq_27891995

最新推荐文章于 2023-01-04 11:36:49 发布

阅读量242

点赞数

分类专栏： js基础文章标签： absolute 元素定位 margin

本文链接：https://blog.csdn.net/qq_27891995/article/details/85236029

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- https://www.jianshu.com/p/9713e008696d 
	当父节点有边框时，父节点的margin-top默认为0；
当父节点没有边框时，父节点的margin-top等于子节点最大的margin-top-->
<div style="position: relative; width: 150px; height: 150px; margin-top: 50px; margin-left: 50px; border: 1px solid black">
    <div style="width: 100px; height: 100px; margin-top: 100px; margin-left: 100px; background: red;">
        <div style="position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background: blue"></div>
    </div>
</div>


</body>
</html>