Я хочу вставить изображения SVG с тегом, но проблема в том, что когда я изменяю размер окна браузера (делаю его меньше), я теряю соотношение сторон, особенно при изменении размера по вертикали. Изображения имеют тенденцию терять расстояние между собой, когда становятся меньше. Кто-нибудь сталкивался с подобной проблемой?
https://jsfiddle.net/bh7gz06q/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets."> <link rel="stylesheet" href="test.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> </head> <body> <div class="container"> <embed class="imgelement" src="https://www.drawsvg.org/home/img/picture.svg" id="embed1" width="15%" height="auto" type="image/svg+xml" style="position:absolute;left:50%;top:0%"></embed> <embed class="imgelement" src="https://www.okcode.pl/img/bg-square.svg" id="embed" width="15%" height="auto" type="image/svg+xml" style="position:absolute;left:50%;top:40%;z-index:3"></embed> <embed class="imgelement" src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" id="embed2" width="15%" height="auto" type="image/svg+xml" style="position:absolute;left:50%;top:70%;z-index:2"></embed> </div> </script> </body> </html>
top: 40% и top: 70% остается верным, когда вы изменяете размер по вертикали, поэтому они перекрываются. Есть ли причина, по которой вы используете абсолютное позиционирование?