How can I do element into anchor tag dont have to clickable?-CodePudding

I have a card and this card is clickable due to anchor tag

  <a href="{{ route('frontend.adv.show', $item->id) }}" >
                                <div 
                                    style="background-image: url({{ $item>getFirstMediaUrl('advertisement_images', 'thumb-medium') }})">
                               

                                    <button >
                                        <img src="{{ asset('frontend/img/favorites.svg') }}" alt="favorites icon">
                                    </button>
                                </div>
                            </a>

I need button must be not clickable, but outside of button (into anchor) must be clickable. Now both of them clicks. I tried z-index but it does not work.

Css (Sass)

     .card {
                    width: 252px;
                    height: 288px;
                    background: #f9fafb;
                    border-radius: 4px;
                    position: relative;
                    z-index: 1;
              
                    .card-img {
                        width: 100%;
                        height: 50%;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;
                        position: relative;  
                        .favorites {
                            position: absolute;
                            z-index: 11111;
                            right: 12px;
    
                        }
                    }
                }

CodePudding user response：

`z-index` overlay

Add a div that sits outside of anchor
Give the div the following styles (lengths may vary of course)

.overlay {
  position: relative;
  z-index: 1;
  top: -58px;
  width: 60px;
  height: 54px;
  border: 3px dashed red;
}

<a href="https://example.com" >
  <div  style="background-image: url(https://i.ibb.co/YPyQyFr/bar.png)">
    <button >
      <img src="https://cdn2.iconfinder.com/data/icons/weby-flat-vol-1/512/1_favorite-red-heart-1024.png" alt="favorites icon" width='48' height='48'>
    </button>
  </div>
</a>
<div class='overlay'></div>

You almost had the right idea about z-index except that in order to exceed another tag (like the anchor) you need a tag that isn't a descendant ie outside not inside of the anchor.

z-index overlay

`z-index` overlay