I have read that to make a children box relative to its father , you must set the children position to absolute and the father position to relative.
But , in practice , I'am having some troubles.
I have an example of it , if you want to see it in this link :
Code Pen link
Basically , what happens is this :
I have set a box relative to its parent 75% to the left , which looks fine when the windows is full size.
<body>
<div id = "myspace"> My Space
<input type="text" placeholder="Search..">
<div id = "wallet">Minha Carteira<hr>
<div class="dropdown-content">
<ul style="list-style: none;">
<li>Stock 1</li>
<li>Stock 2</li>
<li>Stock 3</li>
<li> Ou adicione mais ac??es à sua carteira , clicando aqui..</li>
</ul>
</div>
</div>
<div id = "calendario">Calendário e Eventos<hr>
<div class="dropdown-content2">
<div id ="calendar-box"></div>
</div>
<table></table>
</div>
<div id = "resumo">Resumo do dia<hr></div>
</div>
</body>
#myspace
{
border: 2px solid black;
text-align: center;
position : relative;
}
#wallet
{
border: 2px solid black;
margin : 2px;
text-align: center;
background-color: blue;
}
.dropdown-content
{
display : none;
}
li{
border-bottom: 2px solid black;
width : 96%;
}
li:hover
{
background-color: white;
}
#wallet:hover .dropdown-content
{
display : block;
cursor: grab;
}
#calendario
{
border: 2px solid black;
margin : 2px;
text-align: center;
background-color: lightblue;
}
.dropdown-content2
{
display : none;
}
li{
border-bottom: 2px solid black;
width : 96%;
}
#calendario:hover .dropdown-content2
{
display : block;
position: relative;
}
#calendar-box
{
height : 300px;
width : 300px;
border : 2px solid black;
margin : 5px;
position: relative;
left : 70%;
}
The issue happens when I resize the window this box , goes outside the parent , when it should maintain its position relative to the parent.
I have tried to change the position both of the father and the children between relative and absolute , but still I keep failing.
Some help would be great!
Thanks
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
