CODEWITHSUNDEEP
reactjshtmlcssbootstrap-4
Kanekar
Kanekar

Reputation: 161

How can we hide background content of div?

Hello everyone I am learning HTML and CSS I have question regarding hiding div background content or background view. want to show only current div content. I have div in that I am showing some content.But facing some problem while its displaying.I am showing this div but its also showing background div data or content. Can someone please guide me how can I hide the background content of div. here is my code what actually I am doing.


  <div className="progressBarPosition">
      <span className="text-dark">File Upload</span>
      <div class="progress">
        <div class="progress-bar" style={{ width: `${this.props.percentage}%` }}>{this.props.percentage}%</div>
      </div>
    </div>

and here is css.

.progressBarPosition{
        padding: 24px 27px;
        color: #c5c1c1;
        position: fixed;
        top: 8px;
        left: 308px;
        right: 308px;
        height: 14%;
        border: 1px solid #9B9B9B;
        box-shadow: 0 0 24px 7px;
        border-radius: 3px;
    }

Here is output what I am getting. enter image description here

As you can see in Image its showing background content as well like Manage Profile, job title Can anyone know how can I show only my current div content and hide background content?

I tried to apply background-color: white but its not worked If someone know please guide me.Thanks in Advance any help will be appreciated.

Upvotes: 0

Views: 3493

Answers (2)

Gnanav
Gnanav

Reputation: 83

Try to use ** z-index** in div element, the one you want on top

Upvotes: 0

Michael George
Michael George

Reputation: 248

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
   #layer1, #layer2, #layer3, #layer4 {
    position: relative;
   } 
   #layer1, #layer3 {
    font-size: 50px; 
    color: #000080; 
   }
   #layer2, #layer4 {
    top: -55px; 
    left: 5px; 
    color: #ffa500;
    font-size:70px;
   }
   #layer1 { z-index: 2; }
   #layer2 { z-index: 1; }
   #layer3 { z-index: 3; }
   #layer4 { z-index: 4; }
  </style>
 </head>
 <body>
  <p>Layer 1 at the top</p>
  <div id="layer1">layer1</div>
  <div id="layer2">layer2</div> 
  <p>Layer 4 at the top</p>
  <div id="layer3">layer3</div>
  <div id="layer4">layer4</div> 
 </body>
</html>

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Upvotes: 1

Related Questions