не могу наложить картинку на картинку

Question

body {
    margin: 0;
    padding: 0;
}

.main {
    width: 1920px;
    height: 1080px;
}

.main #qwe1 {
    height: 1920px;
    height: 1080px;
    position: relative;
}

.main #qwe2 {
    height: 900px;
    height: 400px;
    position: absolute;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src='main.js'></script>
</head>
<body>
    <div class = "main">
        <img id="qwe1" src="143164-geometric-wallpaper-geometric-high-quality-background-19201080.jpg">
        <img id="qwe2" src="4soa9bfh1oqkeh7vpk54v46alu.png">
    </div>
</body>
</html>

Answer 1

"main" у вас родительский элемент для двух изображений, поэтому для "main" position: relative, а для img position: absolute; и первому и второму, в таком случае выставляя для img свойства z-index, top, lef right, bottom можете размещать их так как вам удобно

.main {
     width: 1920px;
     height: 1080px;
     position: relative;
}

 .main #qwe1 {
     height: 1920px;
     height: 1080px;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1
}

.main #qwe2 {
    height: 900px;
    height: 400px;
    position: absolute;
    top: 0;//выставляйте так как вам удобно
    left: 0;//выставляйте так как вам удобно
    z-index: 2
}

или же первое изображение сделайте как фоновое для "main", а второе будет с абсолютным позиционированием

БЛОГ НА HUSL

не могу наложить картинку на картинку

Ответы (1 шт):