On my webpage, I have a set of buttons located at the bottom. When I first open the page, all the buttons are displayed properly. However, sometimes the first three buttons become hidden mysteriously and the layout changes. I am puzzled as to what could be causing this issue. Interestingly, when I inspect these hidden buttons and make any property changes, they suddenly reappear in their correct positions. It's quite strange but true.
The code for the list elements is as follows:
li
{
position: relative;
top: 7px;
left: 10px;
display: block;
float: left;
margin-right: 10px;
}
Removing the "position: relative" property prevents the hiding issue; however, the buttons then move to the top of the page. You can see an example here.
Update: I suspect the problem may be related to the use of 'position:relative'. Can I modify my code without this property? Alternatively, would using 'position:absolute' solve the problem?
Check out the Fiddle for reference.