@goredevo4ka

Имеет ли смысл использовать абсолютное позиционирование?

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

666dab7f2cc09108884831.png
<!DOCTYPE html>
<body>
    <header>
        <div class="logo"> <img src="content/розовая лиса 1.png" alt=""></div>
        <div class="title"><img src="content/fox wedding.png" alt=""></div>
        <div class="cart-icon"><img src="content/image 96.png" alt=""></div>
    </header>
   <main>
        <div class="nav_links">
        
    <div class="nav_links_wed">   
            <a href="">wedding dresses</a>
        </div>

    <div class="nav_links_access">
        <a href="">accessories</a>
        </div>

    <div class="nav_links_eve">     
        <a href="">evening dresses</a>
        </div>
            
    <div class="nav_links_cont">
        <a href="">contacts</a>
        </div>
        </div>

    <div class="block2">
            <div class="block2_shop-text">text text text</div>
               
                <div class="block2_buttons">
                    <button class="button">REVIEWS</button>
                    <button class="button">HISTORY</button>
                    <button class="button">SERVICES</button>
        </div>
    </div>
</body>
</html>

css:
.nav_links {
  color: black;
  text-decoration: none;
}
.nav_links_cont {
  position: absolute;
  left: 55%;
  background-image: url("content/contactscloud.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 900px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.nav_links_wed {
  position: absolute;
  left: 0%;
  bottom: 10%;
  background-image: url("content/weddingcloud.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 900px;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.nav_links_eve {
  position: absolute;
  left: 40%;
  bottom: -40%;
  background-image: url("content/eveningcloud.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 900px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}
.nav_links_access {
  position: absolute;
  left: 70%;
  bottom: 10%;
  background-image: url("content/accessoriescloud.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 600px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.block2 {
  margin: 3%;
  display: flex;
  width: 110%;
  color: white;
}
.block2_shop-text {
  width: 60%;
  text-align: left;
}

.block2_buttons {
  display: flex; /* Используем flexbox для выравнивания */
  flex-direction: column; /* Элементы в столбик */
  width: 40%; /*Ширина контейнера */
  align-items: center;
}

.button {
  margin: 4%; 
  width: 200px;
  height: 50px; 
  background-color: transparent;
  border: 2px solid white;
}

по какой то причине блок под облаками залезает сверху. подскажите пожалуйста, как можно исправить, может я изначально не ту тактику выбрала?
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы