@ShyZyK

Почему z-index не работает в CSS?

Изображения остаются на одном уровне и при увеличении ширины, благодаря z-index, одно из них должно было бы перекрыть другое, но изображения просто делают отступ от растянутой картинки

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css" >
    <title>Document</title>
</head>
<body>
    <img src="1.jpg" alt="1" width="100px" height="100px" class =  "one">
    <img src = "2.jpg" alt = "2" width="100px" height="100px" class="two">
    <img src = "3.jpg" alt = '3' width="1000px" height="100px" class=" three">
</body>
</html>


.one, .two, .three{
   position: relative;
 }
.one{
   top: 50px;
   left: 0px;
   z-index: 1;
}
.two{
   top: 50px;
   left: 30px;
   z-index: 2;


}
.three{
   top: 50px;
   left: 60px;
   z-index: 3;
}
  • Вопрос задан
  • 136 просмотров
Решения вопроса 1
Vlatqa
@Vlatqa Куратор тега CSS
потому что не
.one .two .three{
   position: relative;
 }

а
.one, .two, .three{
   position: relative;
 }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iamd503
@iamd503 Куратор тега CSS
Верстальщик
.one, .two, .three{
   position: relative;
   display: block;
 }
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
24 янв. 2021, в 21:49
9999999 руб./за проект
24 янв. 2021, в 21:49
5000 руб./за проект