Home>

I wanted to display the brown box on the right above the image of the cat, so I put in a z-index, but it didn't work.
Please refer to the following.
If i use position: absolute ;, the bulleted element on the right will appear above the cat.
How can this be resolved? Thank you.


        
        <p>
          <? php the_excerpt ();?>
        </p>
        
        
           // img/signboard-cat.png">
        
    
.company-info-box-right-excerpt-cover {
  position: relative;
}
.company-info-box-right-excerpt {
  height: auto;
  max-width: 512px;
  border-radius: 12px;
  background-color: # f8f8f8;
  padding: 10px;
  margin-left: 30px;
  border: 6px solid brown;
  filter: drop-shadow (0 0 10px white);
  p {
    margin-bottom: 0! important;
    font-weight: bold;
  }
}
.company-info-box-right-excerpt-cover {
  position: relative;
  p {
    position: relative;
    z-index: 2;
  }
}
.company-info-box-right-excerpt-signboard-cat {
  img {
    filter: drop-shadow (0 0 10px white);
    width: 200px;
    position: relative;
    top: -50px;
    left: 150px;
    z-index: 1;
  }
}
  • Answer # 1

    Do you want the stick that the cat has to hide behind the Kanban (the box that starts with "Chiyoda-ku.")?

    If so,.company-info-box-right-excerptToposition: relative;Whenz-index: 2;I think you should add.

  • Answer # 2

    z-index is used to control sibling elements.
    If you do the following, the stick held by the cat will rotate behind the brown framed board.

    .company-info-box-right-excerpt-cover {
        position: relative;
        z-index: 2
    }