关于css中子绝父相
正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教！
子绝父相就是对子元素和父级元素的定位有一个设置
设置了子绝父相1过后，子级元素的参考坐标系将不是页面左上角，而是定位父级的左上角，从而在进行布局时可以更方便。
下面放出代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 300px auto;
position: relative;
}
#d2{
position: absolute;
width: 100px;
height: 100px;
background: red;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div id="d1">这是一个div
<div id="d2">2</div>
</div>
</body>
</html>
实现效果如下
这里可以看见通过位置的相对绝对定位，div2计算坐标是以父级div1来进行定位的
别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！
扫一扫
2218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
