Question

容器div与我的bar div重叠。如何确保容器div与条形图不重叠？在容器标签上我添加了溢出隐藏但没有帮助。

这里也是html：

＆＃13;

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;
    }

＆＃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;

Answer 1

`

127.0.0.1 www.panda.dev

`

Answer 2

将margin-top: 20%添加到容器DIV中。此外，您还需要将heigth: 100%添加到html和body，以便这些百分比设置正常运行。

Answer 3

您可以尝试这样做：将position: absolute; top: 20%;添加到您的容器中。

您的容器div重叠，因为bar div设置为固定位置，这意味着该元素将从正常流程中取出，并且下面的所有元素都会移动到文档的开头。

＆＃13;

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;

Answer 4

您还需要设置overflow: auto;

＆＃13;

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;

Answer 5

你必须为你的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 ...希望这会对你有所帮助......

Div与内容重叠其他div

5 个答案: