Question 324667 in Html Question posted in
Some basic documentation can be found here.

Html – CSS: element that only visible above certain elements

Is it possibe by any way to make element that only can be visible above certain other elements?

For example, in this code, I would like the .reflection element to be visible only above the .reflective elements (which are at the top and bottom) and not visible on the .non-reflective element (which is in the center):

  .bg
  {
      position: relative;
      width: 300px;
      height: 150px;
      background-color: green;
  }
  .reflective
  {
      width: 100%;
      background-image: url(https://sample.wdd.co.il/wp-content/uploads/sites/6/2024/01/mahogany-4.jpg);
      height: 45px;
      margin: 2.5px 0;
      border: 1px solid gray;
      border-radius: 15px;
      box-shadow: inset 0 0 10px black;
  }
  .non-reflective
  {
      width: 100%;
      background-color: transparent;
      height: 50px;
      border: 1px solid brown;
      border-radius: 15px;
  }
  .reflection
  {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 250px;
      height: 150px;
      border-radius: 100%;
      background: linear-gradient(to bottom right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
  }
<div class="bg">
    <div class="reflective"></div>
    <div class="non-reflective"></div>
    <div class="reflective"></div>
    <div class="reflection"></div>
</div>
Tags:

2

Answers


  1. 0

    You can archive this using z-index property. And using position property.

    .bg {
  position: relative;
  width: 300px;
  height: 150px;
  background-color: green;
}

.reflective {
  width: 100%;
  background-image: url(https://sample.wdd.co.il/wp-content/uploads/sites/6/2024/01/mahogany-4.jpg);
  height: 45px;
  margin: 2.5px 0;
  border: 1px solid gray;
  border-radius: 15px;
  box-shadow: inset 0 0 10px black;
  position: relative; /* added */
  z-index: 1; /* added */
}

.non-reflective {
  width: 100%;
  background-color: transparent;
  height: 50px;
  border: 1px solid brown;
  border-radius: 15px;
  position: relative; /* added */
  z-index: 2;  /* added */
}

.reflection {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 250px;
  height: 150px;
  border-radius: 100%;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;  /* added */
}
    <div class="bg">
    <div class="reflective"></div>
    <div class="non-reflective"></div>
    <div class="reflective"></div>
    <div class="reflection"></div>
</div>
    Login or Signup to reply.
  2. 0

    Add z-index=-1; and position: relative; in non-reflective class

    .non-reflective {
    position: relative;
    z-index: -1;
    width: 100%;
    background-color: transparent;
    height: 50px;
    border: 1px solid brown;
    border-radius: 15px;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search