Как расположить элемент в 20 px от нижней границы viewporta? и центрировать его по горизонтали?
body {
height: 100vh;
}
.container {
margin: 0 auto;
padding: 0;
position: relative;
width: 500px;
height: 400px;
}
.biohazard {
position: absolute;
bottom: 170px;
left: 23px;
}
.yin-yang {
position: absolute;
bottom: 20px;
left: 135px;
}
.man-and-woman {
position: absolute;
bottom: 180px;
left: 250px;
}
.no-smoking {
position: absolute;
bottom: 100px;
left: 110px;
}
.model {
width: 200px;
height: 100px;
background-color: yellow;
position: fixed;
top: 10%;
right: 20px;
z-index: 101;
}
p {
text-align: center;
padding: 10px;
color: blue;
font-size: 20px;
}
.top {
background-image: url(images/to-top.png);
width: 40px;
height: 40px;
position: absolute;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Images</title>
</head>
<body>
<a name="#top"></a>
<h2>What is Lorem Ipsum?</h2>
<div class="container">
<img class="biohazard" src="images/biohazard.png" alt="biohazard">
<img class="yin-yang" src="images/yin-yang.png" alt="yin-yang">
<img class="man-and-woman" src="images/man-and-woman.png" alt="man-and-woman">
<img class="no-smoking" src="images/no-smoking.png" alt="no-smoking">
</div>
<div class="model">
<p>Здесь может быть Ваша реклама!!!</p>
</div>
<a class="top" href="#top"></a>
</body>