Container loses top margin when element is made visible - html

Question

I was trying to participate in a CSS challenge when this occurred. Everything seems working as expected, however when clicking on the plus circle to display div#card the div.container loses it's top margin and I cannot understand why. Please if anyone can help me with this, I'd be really grateful - And maybe we can all learn from it ;)
Thanks!
Codepen: https://codepen.io/albertrf147/pen/LMKKeK
HTML
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
background: lightblue;
}
.container {
width: 400px;
height: 400px;
margin: 20px auto !important;
position: relative;
display: flex;
flex-wrap: wrap;
background: white;
padding: 2px;
}
.square {
box-sizing: border-box;
padding: 2px;
width: 50%;
height: 50%;
position: relative;
background: white;
}
.square>img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
margin: auto;
}
.onhover {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
transition: all .6s ease-in-out;
}
.onhover:hover {
background: rgba(0, 0, 0, 0.5);
}
.circle-aux {
position: relative;
width: 100%;
height: 100%;
transition: all .6s ease-in-out;
}
.circle-aux:hover .circle {
visibility: visible;
opacity: 1;
transform: scale(0.2);
transition: all .6s ease-in-out;
}
.circle {
visibility: hidden;
opacity: 0;
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
background: salmon;
}
.circle:before {
content: "";
background: white;
height: 50%;
width: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:after {
content: "";
background: white;
height: 6px;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container-card {
visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.container-card>img {
width: 100%;
height: 60%;
object-fit: cover;
}
.container-card:target {
visibility: visible;
}
.avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0px 0px 20px black;
width: 25%;
height: 25%;
background: white;
z-index: 2;
text-align: center;
font-family: calibri;
font-weight: bold;
color: white;
font-size: 18px;
}
.avatar>img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
padding: 4px;
}
.mini-circle {
display: inline-block;
width: 15%;
height: 15%;
border: 1px solid white;
border-radius: 50%;
margin-top: 12px;
}
.mini-circle:hover {
background: white;
cursor: pointer;
}
footer {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
background: salmon;
height: 50%;
width: 100%;
z-index: 1;
padding: 2px;
}
.close {
position: absolute;
border-radius: 50%;
width: 8%;
height: 8%;
background: black;
transform: rotate(45deg);
right: 10px;
top: 10px;
cursor: pointer;
}
.close:before {
content: "";
background: white;
height: 60%;
width: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close:after {
content: "";
background: white;
height: 2px;
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<main>
<div class="container">
<div class="square">
<div class="onhover">
<div class="circle-aux">
<a class="circle" href="#card"></a>
</div>
</div>
<img src="https://images.pexels.com/photos/305241/pexels-photo-305241.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1546711/pexels-photo-1546711.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1800433/pexels-photo-1800433.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1757111/pexels-photo-1757111.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div id="card" class="container-card">
<a class="close" href="#"></a>
<img src="https://images.pexels.com/photos/1769331/pexels-photo-1769331.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<div class="avatar">
<img src="https://images.pexels.com/photos/769772/pexels-photo-769772.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<span>David Craig</span>
<span>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
</span>
</div>
<footer></footer>
</div>
</div>
</main>

Answer 1

Welcome to SO!
As the appearing container is position: absolute no margin takes effect.
You need to work with the top attribute to place it properly.
Check this out: https://codepen.io/anon/pen/pGzVyL
For more informations click here: https://www.w3schools.com/css/css_positioning.asp