在特定的屏幕大小范围内（低1000秒），我有一个内容div，它将完全移动到导航div上。好像两个div都从页面的顶部开始。
以下是HTML：
<body id="about">
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="#" class="selected">About</a>
<a href="contact.html">Contact</a>
</div>
<div class="row">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
</div>
下面是相关的CSS：
@media screen and (min-width: 993px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#myTopnav {
position: absolute;
top: 0px;
left: 0px;
}
.row {
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left h4 {
margin: 5em;
}
}
.rounded {
border-radius: 50%;
width: 65%;
}
#left {
margin: 0;
padding: 0;
}
#left h4 {
line-height: 150%;
}
#right {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
为什么
rowdiv会移动到myTopnavdiv的顶部？ 最佳答案
你已经给了你的#myTopnav一个绝对位置。这使它脱离了页面的流动。
这意味着您必须处理其他元素的间距，以便它们不会与绝对定位的元素重叠。
在您的例子中，您需要给row类一个与#myTopnav元素高度匹配的边距。
由于row是一个可能在很多地方使用的类，您可能应该添加一个新的css类并使用它来设置间距。例如
<div class="row with-spacing">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
CSS:
@media screen and (min-width: 993px) {
.row.with-spacing {
margin-top:50px;
}
}
关于html - 在某些屏幕尺寸上，div移动到div之上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46966208/