css定位问题
本文介绍了css定位问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么当设置子元素的margin时父元素会跟随向下动，父元素设置的是relative，后来只好用absolute定位子元素。请问出现这种情况的原因有哪些？已经是第二次遇到这种情况了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#father{
width: 700px;
height:700px;
margin:30px auto;
position: relative;
background: yellow;
}
#one{
width: 300px;
height: 300px;
background: blue;
position: absolute;
top:10px;
left:20px;
}
#two{
width: 300px;
height: 300px;
background: red;
margin-top: 50px;
}
</style>
</head><body>
<div id="father">
<div id="one">1</div>
<div id="two">2</div>
</div></body>
</html>
解决方案
能贴代码吗？按照我的理解，子元素设置margin一般是撑大父元素的，我不知道你说的父元素会跟随向下动是什么意思,把代码贴上来吧，好分析
你这个问题是margin collapse(外边距塌陷);解决的方法有三种：
1给父元素设置一个边框，当然可以设置边框为透明;
2.为父元素添加padding；
3：为父元素设置overflow:hidden;
这篇关于css定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
