Я полностью новичок в HTML, и я хочу разместить и определить размер элемента относительно его контейнера. Я скопировал этот код (https://codepen.io/Tectonics0x3F/pen/EfAgr), и если я изменил верхний и левый проценты, например, на 25% и 25%, то коробка будет на 25% ниже верхней части контейнера и на 25% больше в правильное направление совпадает с размером ящика, если я изменил Высота и Ширина. Ящик был на высоте 25% от высоты контейнера и на 25% от длины контейнера. Но если я делаю это в своем коде, ящики и контейнер просто куда-то направляются. Я думаю, проблема в том, что ящики на самом деле не в контейнере, но я не знаю, как это сделать. И еще, если вам нужно это знать, но я хочу сделать меню с этими полями в контейнере. Заранее благодарю за помощь и извините за мой плохой Engli sh.
Мои коды
body{
background-image:url('../images/bg24.jpg');
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
line-height: 1.6em;
margin:0;
background-repeat:repeat;
margin: auto;
}
#container {
height:70%;
width:90%;
margin:auto;
top:25%;
left:5%;
border: 5px solid white;
position:relative;
}
.button {
background-color: #474B4F;
border: 2px solid Black;
color: white;
padding: 5% 5%;
text-align: center;
text-decoration: none;
display: inline;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
}
#button1{
top: 0;
left: 0;
position:absolute;
}
#button2{
margin-top:0;
margin-left: 25%;
position: absolute;
}
<body>
<div id="container">
<div id="button1">
<a href="Somepage.html" class="button">clickme1</a>
<div id="button2">
<a href="Somepage2.html" class="button">clickme2</a>
</div>
</div>
</body>