Question

这应该是主页面，其中logo（img）位于页面的中心，并且在3面（左/右/底部）将是用作链接的图像 - 参见示例img -

https://ibb.co/bAah2v - ＆gt; （黑色方块=徽标，黄色菱形=链接/图像，一切都应缩放到浏览器分辨率）

绝对定位有问题。图像是定位到整个屏幕而不是我认为应该是父母的徽标？（根据w3school-＆gt; https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute）

或者可能有其他方法可以获得良好的定位，调整和缩放取决于浏览器的分辨率？（js / php？）

感谢您的时间，想法和帮助

HTML

<body>
<div id="main_logo">
<img class="logo_glowne" src="X.png" alt="Logo" </img>
  <div id="main_menu">
                <a href="t_aktualnosci.html"><img class="taniec" src="Z.jpg" alt="."/></a>
                    <a href="odziez.html"><img class="wear" src="Z.jpg" alt="."/></a>
                    <a href="adres"><img class="adres" src="Z.jpg" alt="." /></a>

   </div>
</div>
</body>

CSS

  body{
margin: 0;
padding: 0;

}/*full screen div */
#main_logo {
position:relative;
width:100%;
height:100%;
background-color:black;
}
/* logo center */
img.logo_glowne {
max-width:100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
position:relative;
}

img.taniec{width:60px;height:60px;position:absolute;bottom:20%;left:50%;}
img.wear {width:60px;height:60px;position:absolute;top:48%;left:80%;max-width:100%;}
img.adres {width:60px;height:60px;position:absolute;top:48%;left:20%;max-width:100%;}

Answer 1

要使绝对位置 INSIDE 相对，您需要放置绝对元素 INSIDE 相对元素。您需要将position: relative放在#main_menu上，如下所示：

#main_menu{
    position: relative;
}

将图像绝对定位在相对内部

1 个答案: