我有以下代码:
<html>
<head>
<style>
#yellow {height:100px; background:yellow;}
#blue {background:blue;}
#red {background:red; width: 400px; height: 100px; margin:0px auto;}
</style>
</head>
<body>
<div id="yellow"></div>
<div id="blue">
<div id="red">Lots of content goes in here that will expand the outer blue box as well</div>
</div>
</body>
</html>
我希望红色框向上移动大约 30 个像素，以便它与黄色框和蓝色框重叠。当我尝试执行 #red {margin:-30px auto 0px auto;} 时，蓝色框也随着红色框向上移动了 30 像素，即使我希望蓝色框留在地方。
如何让红框向上移动并与黄色和蓝色重叠？
最佳答案
给你。
#yellow {
height:100px;
background:yellow;
}
#blue {
background:blue;
}
#red {
background:red;
width: 100px;
height: 100px;
margin:0px auto;
position:relative;
top:-30px;
}
关于css - 如何使用 CSS 向上移动内盒并使外盒保持原位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9421487/