我正在构建一个模板，该模板在左侧有一个固定标题和一个固定侧栏。我的问题是，当我缩短窗口并水平滚动时，固定 div 与相邻的 '.content' 重叠。
当我水平滚动时，我不希望固定的 '.sidebar1' 与 '.content' div 重叠。我该如何解决这个问题？
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>最佳答案
这样做的原因是固定技术使其不占用页面空间。
我注意到您的内容的宽度和高度是固定的，这可能是您的第一个问题。大型容器上的固定宽度通常是一个坏主意，因为它会破坏页面上的其他所有内容，或者阻止其按您想要的方式显示。
最终结果应该类似于:
.内容{
宽度:500px；
高度:1060px；
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
如果您出于某种原因需要它水平滚动，那么我会说在 div.content 上设置 position:fixed; 并向您的 HTML 添加一个属性wrap="off" 看看是否符合您的要求。
希望这有帮助。干杯。
关于html - 修复水平滚动时 div 与相邻 div 重叠的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35137506/