CSS/JS Несколько ссылок помимо глобальной

Рейтинг: 0Ответов: 1Опубликовано: 06.03.2023

Есть карточки новостей, внутри каждой карточки идет глобальная ссылка на эту запись с position: absolute, чтобы можно было перейти к новости нажав на любую область

Однако помимо глобальной ссылки, есть еще некоторые ссылки которые тоже должны работать. Сейчас получается, что глобальная ссылка их "перебивает". Нужно реализовать так, чтобы "Еще ссылка" и "И еще ссылка" работали, а не вели по глобальной, а вся остальная область карточки уже вела по глобальной ссылке .post__global-link

Пробовал их реализовать так же через абсолют - не получилось

Для наглядности прикрепляю html со стилями

.post {
    border: 1px solid transparent;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 16px;
    margin-top: 0;
    color: white;
    height: auto;
    background: #1A1A2B;
    border-radius: 15px;
}

.post__global-link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.post .img-box {
    max-width: 31.8181818182%;
    min-width: 40.9090909091%;
    width: 31.8181818182%;
    flex: 1 1 31.8181818182%;
    height: 100%;
}

.post .img-box-overflow {
    width: auto;
    height: auto;
    padding-bottom: 75%;
    display: block;
    position: relative;
    overflow: hidden;
}

.is-scaling {
    border-radius: 10px;
    overflow: hidden;
}

.post .img-box-overflow img.article-block__img {
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: 100%;
}

.post .post__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.post__info-tags ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
}

a.post__tag-link{
  text-decoration: none;
  color: white;
  background: gray;
  border-radius: 10px;
  padding: 10px;
}
<article class="post">
    <a class="post__global-link" href="https://link-to-post.com"></a>
        <div class="img-box">
            <div class="img-box-overflow is-scaling">
                <img class="article-block__img" src="https://assets.entrepreneur.com/content/3x2/2000/20170720143824-image-search-phone.jpeg" alt="some-alt" title="">
            </div>
        </div>
    <div class="post__info">
        <div class="info">
            <div class="category-overlay">
                <span>Категория</span>
            </div>
            <time class="entry-date">
                <span class="date">12.02.2023</span>
            </time>
        </div>
        <h5>Заголовок</h5>
        <span class="preview-text">
            Текст превью
        </span>
        <div class="post__info-tags">
          <ul>
          <li><a class="post__tag-link" href="http://test-link2/" id="link1">Еще ссылка</a></li>
          <li><a class="post__tag-link" href="http://test-link3/" id="link2">И еще ссылка</a></li>
          </ul>
        </div>
    </div>
</article>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Нужно реализовать так, чтобы "Еще ссылка" и "И еще ссылка" работали, а не вели по глобальной, а вся остальная область карточки уже вела по глобальной ссылке .post__global-link

Добавил к стилям ссылки position: relative; - теперь они будут работать как нужно.

.post {
    border: 1px solid transparent;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 16px;
    margin-top: 0;
    color: white;
    height: auto;
    background: #1A1A2B;
    border-radius: 15px;
}

.post__global-link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.post .img-box {
    max-width: 31.8181818182%;
    min-width: 40.9090909091%;
    width: 31.8181818182%;
    flex: 1 1 31.8181818182%;
    height: 100%;
}

.post .img-box-overflow {
    width: auto;
    height: auto;
    padding-bottom: 75%;
    display: block;
    position: relative;
    overflow: hidden;
}

.is-scaling {
    border-radius: 10px;
    overflow: hidden;
}

.post .img-box-overflow img.article-block__img {
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: 100%;
}

.post .post__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.post__info-tags ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
}

a.post__tag-link{
  text-decoration: none;
  color: white;
  background: gray;
  border-radius: 10px;
  padding: 10px;
  /* добавка */
  position: relative;
  
}
<article class="post">
    <a class="post__global-link" href="https://link-to-post.com"></a>
        <div class="img-box">
            <div class="img-box-overflow is-scaling">
                <img class="article-block__img" src="https://assets.entrepreneur.com/content/3x2/2000/20170720143824-image-search-phone.jpeg" alt="some-alt" title="">
            </div>
        </div>
    <div class="post__info">
        <div class="info">
            <div class="category-overlay">
                <span>Категория</span>
            </div>
            <time class="entry-date">
                <span class="date">12.02.2023</span>
            </time>
        </div>
        <h5>Заголовок</h5>
        <span class="preview-text">
            Текст превью
        </span>
        <div class="post__info-tags">
          <ul>
          <li><a class="post__tag-link" href="http://test-link2/" id="link1">Еще ссылка</a></li>
          <li><a class="post__tag-link" href="http://test-link3/" id="link2">И еще ссылка</a></li>
          </ul>
        </div>
    </div>
</article>