Как сделать что бы то что внутри красной области было

ссылкой тега а. А сердечка не входило туда?

Просто с помощью z-index вынесите сердечко выше ссылки. Ссылки я в таких случаях предпочитаю делать вложенным элементом в карточку, и просто абсолютом позиционируя её на всю высоту/ширину

не работает))

Я не знаю, что именно и как вы сделали. Я лишь предложил вам подход, который сам по себе рабочий

<li class="nav-link but--icon pl--40" style="z-index: 10000000;"> <img class="img-svg icons-style-social " src="{% static 'main/img/icons/card_heart.svg' %}" alt=""> </li>

template v-for="card in card_list"> <a class="col td--none" :href="listing/${card.ListingId}"> <div class="col mb-3" > <div class="card transform-card-rent"> <template v-if="card.Media"> <img :src="card.Media[0].MediaURL" class="card-img-top img-card--listing" alt="Vera Realty Listing" style="width: 100%; height: 200px; object-fit: cover; object-position: center"> </template> <template v-else> <img src="{% static 'main/img/other/nocard.webp' %}" class="card-img-top img-card--listing" alt="Vera Realty Listing"> </template> <div class="card-body card--listing pt-1"> <div class="row align-items-start"> <div class="col-6 text-start ps-0"> <ul class="card-text"> <li v-if="card.BedroomsTotal > 0" class="card-text--featured"> [% card.BedroomsTotal %] bedrooms </li> <li v-if="card.BathroomsFull > 0" class="card-text--featured"> [% card.BathroomsFull %] bathrooms </li> <li v-if="card.BuildingAreaTotal > 0" class="card-text--featured"> [% card.BuildingAreaTotal %] sq.f </li> <li v-if="card.City" class="card-text--featured"> [% card.City %] </li> </ul> </div> <div class="col-6 text-end"> <h3 v-if="card.ListPrice" class="card-price--listing nowrap--map">$[% card.ListPrice %]</h3> <p v-if="card.PropertyType" class="card-opt--featured mb-1"> [% card.PropertyType %] <br> [% card.PropertySubType %] </p> <li class="nav-link but--icon pl--40" style="z-index: 10000000;"> <img class="img-svg icons-style-social " src="{% static 'main/img/icons/card_heart.svg' %}" alt=""> </li> </div> </div> </div> </div> </div> </a> </template>

хммм... ну можно сделать так: карточка и сердечко отдельно, сделать над карточкой контейнер, туда положить сердечко, сделать position absolute, и ссылку весить только на саму карточку, не на контейнер

Слишком маленькое значение у z-index Если серьёзно, то во первых, он сам по себе работать не будет, есть правила.

тогда получится, что сердечко снаружи карточки, а не внутри, так что должно сработать

Что значит ссылкой тега?

это не сработает - сердечко же внутри карточки, значит, при клике на него все равно будет редирект

event stop propagation

я уже написала про него

Нет, я же написал. .card>.link+.button

position: absolute; pointer-events: none;

Для сердечка

pointer events не помогут

ну так у нас же link это вся карточка?

Я не знаю, как ещё выразиться) есть карточка. В ней контент. Рядом кладём ссылку абсолютом. Она будет как-бы невидимым слоем поверх контента. Но сердечко делаем слоем ещё выше. Вот и вся задачка