CODEWITHSUNDEEP
htmlcss
user5194501
user5194501

Reputation:

Div with content overlaps other div

The container div is overlapping my bar div. How can I make sure that the container div doesn't overlap the bar? On the container tag I added overflow hidden but that didn't help.

Also here is the 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>

Upvotes: 0

Views: 494

Answers (5)

Qu&#226;n Đỗ Mạnh
Qu&#226;n Đỗ Mạnh

Reputation: 11

` 

 .bar {
  position: fixed;
  width:100%;
  background-color: red;
  height:20%;
  z-index: 99;
}

`

Upvotes: 1

Bharat
Bharat

Reputation: 1082

You have to use a property called z-index for your bar div..What it does is prioritizing the visibility of different div tags.

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

Overflow has nothing to do with scrolling relative to page..Your overflow works with in the div tag..So your overflow can stop items from getting out of container tag..But you are not stopping container to go up..For that use the z-index that I gave...Hope this would help you...

Upvotes: 0

Monicka
Monicka

Reputation: 505

You also need to set 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;
    }
<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>

Upvotes: 0

Mers
Mers

Reputation: 734

You can try this: add position: absolute; top: 20%; to your container.

Your container div is overlapping because the bar div is set to fixed position, which means that the element is taken out of the normal flow and all elements below are moved up to the start of the document.

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

Upvotes: 0

Johannes
Johannes

Reputation: 67814

Add margin-top: 20% to the container DIV. And you also have to add heigth: 100% to html and body for these percentage settings to work properly.

Upvotes: 0

Related Questions