Блог

Главная - Вопросы по программированию - не удается задать правильную позицию для div

не удается задать правильную позицию для div

#html #css #position #z-index #card

#HTML #css #позиция #z-индекс #карточка

Вопрос:

Я хочу разместить .active поверх карты. у карты есть свойство overflow: hidden; Я думаю, лучше посмотреть код

 * {
    font-family: 'Manrope', sans-serif;
    color: #48556a;
}

body {
    margin: 0;
    padding: 0;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #edf2f8;
}

.card {
    background-color: #fff;
    display: flex;
    width: 50%;
    border-radius: 16px;
    overflow: hidden;
    height: 40vh;
    position: relative;
}

.img-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-side {
    box-sizing: border-box;
    padding: 30px;
}

.others {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left {
    display: flex;
    align-items: center;
}

.prof-img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 10px 0 0;
}

.prof-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info h4, .info p{
    margin: 6px 0;
}

.share {
    width: min-content;
    padding: 10px;
    border-radius: 50%;
    transition: 0.3s;
}

.share:hover {
    background-color: #48556a;
}

.share:hover img {
    filter: brightness(170%);
}


.active {
    background-color: #48556a;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    position: absolute;
    z-index: 10;
}

.active img {
    width: 30px;
    height: 30px;
    margin: 0 0 0 12px;
}

.active h3 {
    margin: 0;
    font-weight: 500;
    color: #6d7f97;
}

@media screen and (max-width: 1360px) {
    .card {
        width: 60%;
    }
}

@media screen and (max-width: 1280px) {
    .card {
        width: 80%;
    }
}

@media screen and (max-width: 1100px) {
    .card {
        width: 90%;
    }
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Article preview component</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
</head>

<body>
  <main>
    <div class="card">
      <div class="img-side">
        <img src="./images/drawers.jpg" alt="">
      </div>
      <div class="text-side">
        <div class="desc">
          <h2>Shift the overall look and feel by adding these wonderful touches to furniture in your home</h2>
          <p>Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve
            got some simple tips to help you make any room feel complete.</p>
        </div>
        <div class="others">
          <div class="left">
            <div class="prof-img">
              <img src="./images/avatar-michelle.jpg" alt="">
            </div>
            <div class="info">
              <h4>Michelle Appleton</h4>
              <p>28 Jun 2020</p>
            </div>
          </div>
          <div class="share">
            <div class="active">
              <h3>SHARE</h3>
              <img src="./images/icon-facebook.svg" alt="">
              <img src="./images/icon-twitter.svg" alt="">
              <img src="./images/icon-pinterest.svg" alt="">
            </div>
            <img src="./images/icon-share.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

Я тоже пробовал z-index, но он не работает
Мне нужно, чтобы карточка была оформлена как в задачах frontend mentor, поэтому мне нужно, чтобы карточка была переполнена: скрыта;
Есть идеи?

Комментарии:

1. каков ваш ожидаемый результат?

2. проблема