容器div与我的bar div重叠。如何确保容器div与条形图不重叠?在容器标签上我添加了溢出隐藏但没有帮助。
这里也是html:
html, body {
padding: 0;
margin: 0;
background-color: #021026;
}
.container {
overflow:hidden;
width:100%;
height:80%;
}
.bar {
position: fixed;
width:100%;
background-color: red;
height:20%;
}
.Projects {
position: absolute;
transform: translateX(50%);
overflow: auto;
width:50%;
/*height:100%;*/
height: auto;
/* placeholder color*/
color: white;
}
.Title {
position: fixed;
width:50%;
height:100%;
/*placeholder color*/
left:50%;
transform: translateY(50%);
color: white;
}

<div class="bar">
<p>hello</p>
</div>
<div class="container">
<div class="Projects">
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
</div>
<div class="Title">
<h1>title</h1>
</div>
</div>
&#13;
答案 0 :(得分:1)
`
127.0.0.1 www.panda.dev
`
答案 1 :(得分:0)
将margin-top: 20%
添加到容器DIV中。此外,您还需要将heigth: 100%
添加到html
和body
,以便这些百分比设置正常运行。
答案 2 :(得分:0)
您可以尝试这样做:将position: absolute; top: 20%;
添加到您的容器中。
您的容器div重叠,因为bar div设置为固定位置,这意味着该元素将从正常流程中取出,并且下面的所有元素都会移动到文档的开头。
html, body {
padding: 0;
margin: 0;
background-color: #021026;
}
.container {
overflow:hidden;
width:100%;
height:80%;
position: absolute;
top: 20%;
}
.bar {
position: fixed;
width:100%;
background-color: red;
height:20%;
}
.Projects {
position: absolute;
transform: translateX(50%);
overflow: auto;
width:50%;
/*height:100%;*/
height: auto;
/* placeholder color*/
color: white;
}
.Title {
position: fixed;
width:50%;
height:100%;
/*placeholder color*/
left:50%;
transform: translateY(50%);
color: white;
}
&#13;
<div class="bar">
<p>hello</p>
</div>
<div class="container">
<div class="Projects">
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
</div>
<div class="Title">
<h1>title</h1>
</div>
</div>
&#13;
答案 3 :(得分:0)
您还需要设置overflow: auto;
html, body {
padding: 0;
margin: 0;
background-color: #021026;
}
.container {
overflow:auto;
width:100%;
height:80%;
position: absolute;
margin-top: 70px;
}
.bar {
position: fixed;
width:100%;
background-color: red;
height:20%;
}
.Projects {
position: absolute;
transform: translateX(50%);
overflow: auto;
width:50%;
/*height:100%;*/
height: auto;
/* placeholder color*/
color: white;
}
.Title {
position: fixed;
width:50%;
height:100%;
/*placeholder color*/
left:50%;
transform: translateY(50%);
color: white;
}
&#13;
<div class="bar">
<p>hello</p>
</div>
<div class="container">
<div class="Projects">
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
<h1>Project 1</h1>
</div>
<div class="Title">
<h1>title</h1>
</div>
</div>
&#13;
答案 4 :(得分:0)
你必须为你的bar div使用一个名为z-index的属性。它的作用是优先考虑不同div标签的可见性。
.container {
overflow:hidden; // you need not use this
width:100%;
height:80%;
}
.bar {
position: fixed;
width:100%;
background-color: red;
z-index:1;
height:20%;
}
溢出与相对于页面的滚动无关。你的溢出在div标签中工作。因此你的溢出可以阻止物品从容器标签中取出..但是你没有停止容器上升..为此使用我给的z-index ...希望这会对你有所帮助......