Html - Hide elements behind DIV but not background

TomaszOlek
September 19, 2023
138 views
0 votes
2 Answers

So I have div.box2 inside div.box1 and the problem is that I wanted to be able to see the background from the div.App (It would be awesome If I also could see other elements behind div.box2) in div.box1 (just like a window) but I can’t use z-index directly on div.box2 or div.box1.

body {
  margin: 0px;
  padding: 0px;
}

.App {
  width: 100vw;
  height: 100vh;
  background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
}

@keyframes moveAround {
  0% {
    left: 50px;
  }
  50% {
    left: 25px;
  }
  100% {
    left: 50px;
  }
}

.box1 {
  width: 250px;
  height: 250px;
  position: relative;
  left: 50px;
  top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  animation: moveAround 3s infinite ease;
}

.box2 {
  width: 200px;
  height: 200px;
  border: 2px solid blue;
}

<div class="App">
  <div class="box1">
    <div class="box2"></div>
  </div>
</div>

Answers

If you’re using .box2 as a "window", why not just get rid of it?

body {
  margin: 0px;
  padding: 0px;
}

.App {
  width: 100vw;
  height: 100vh;
  background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
}

@keyframes moveAround {
  0% {
    left: 50px;
  }
  50% {
    left: 25px;
  }
  100% {
    left: 50px;
  }
}

.box1 {
  width: 250px;
  height: 250px;
  box-sizing:border-box;
  position: relative;
  left: 50px;
  top: 50px;
  border:solid 25px aqua;
  box-shadow:inset 0 0 0 2px blue;
  animation: moveAround 3s infinite ease;
}

<div class="App">
  <div class="box1">
  </div>
</div>

body {
  margin: 0px;
  padding: 0px;
}

.App {
  width: 100vw;
  height: 100vh;
  background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
}

@keyframes moveAround {
  0% {
    left: 50px;
  }
  50% {
    left: 25px;
  }
  100% {
    left: 50px;
  }
}

.box1 {
  width: 200px;
  height: 200px;
  position: relative;
  left: 50px;
  top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: moveAround 3s infinite ease;
    border: 25px solid aqua;
}

.box2 {
  width: 200px;
  height: 200px;
  border: 2px solid blue;
  
}

<div class="App">
  <div class="box1">
    <div class="box2"></div>
  </div>
</div>

Html – Hide elements behind DIV but not background

Answers