Display child above all other elements - html

Question

does anyone know how I can center the white circle into to middle of the blue circle and set the white circle above all other elements? I tried with relative and absolute positioning and with the z-index but I couldnt get it to work. I'm kinda a noob in CSS
.start-container {
height: 100vh;
display: grid;
grid-template-rows: 20% 65% 15%;
grid-template-areas: "header" "startpage" "footer";
}
.header {}
.header-shape {
height: 100%;
background-color: blue;
clip-path: polygon(0 60%, 100% 40%, 100% 100%, 0% 100%);
}
.profile-shape {
position: absolute;
top: 7vw;
left: 65vw;
width: 10vw;
height: 10vw;
background-color: blue;
border-radius: 50%;
filter: drop-shadow(0px 3px 30px rgba(0, 0, 0, 0.60));
}
.profile-picture {
width: 90%;
height: 90%;
background-color: white;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -50% 0 0 -50%;
}
.startpage {}
.footer {
background-color: yellow;
}
<div class="start-container">
<div class="header">
<div class="profile-shape">
<div class="profile-picture"></div>
</div>
<div class="header-shape"></div>
</div>
<div class="startpage"></div>
<div class="footer"></div>
</div>

Answer 1

If you give your shape a z-index, it will put it on top. Make it flex with justify-content and align-items center and that will centre your profile (after removing the absolute positioning):
.start-container {
height: 100vh;
display: grid;
grid-template-rows: 20% 65% 15%;
grid-template-areas: "header" "startpage" "footer";
}
.header {}
.header-shape {
height: 100%;
background-color: blue;
clip-path: polygon(0 60%, 100% 40%, 100% 100%, 0% 100%);
}
.profile-shape {
position: absolute;
top: 7vw;
left: 65vw;
width: 10vw;
height: 10vw;
background-color: blue;
border-radius: 50%;
filter: drop-shadow(0px 3px 30px rgba(0, 0, 0, 0.60));
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.profile-picture {
width: 90%;
height: 90%;
background-color: white;
border-radius: 50%;
}
.startpage {}
.footer {
background-color: yellow;
}
<div class="start-container">
<div class="header">
<div class="profile-shape">
<div class="profile-picture"></div>
</div>
<div class="header-shape"></div>
</div>
<div class="startpage"></div>
<div class="footer"></div>
</div>
Per comment, if you want blue circle (changed to red in example below) below and white above, you would need to have an extra object otherwise the white circle will always be on the same stacking context as it's parent:
.start-container {
height: 100vh;
display: grid;
grid-template-rows: 20% 65% 15%;
grid-template-areas: "header" "startpage" "footer";
}
.header {}
.header-shape {
height: 100%;
background-color: blue;
clip-path: polygon(0 60%, 100% 40%, 100% 100%, 0% 100%);
}
.profile-placement {
position: absolute;
top: 7vw;
left: 65vw;
width: 10vw;
height: 10vw;
}
.profile-placement--shape {
background-color: red;
border-radius: 50%;
filter: drop-shadow(0px 3px 30px rgba(0, 0, 0, 0.60));
}
.profile-placement--picture {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.profile-picture {
width: 90%;
height: 90%;
background-color: white;
border-radius: 50%;
}
.startpage {}
.footer {
background-color: yellow;
}
<div class="start-container">
<div class="header">
<div class="profile-placement profile-placement--shape">
</div>
<div class="profile-placement profile-placement--picture">
<div class="profile-picture"></div>
</div>
<div class="header-shape"></div>
</div>
<div class="startpage"></div>
<div class="footer"></div>
</div>

Answer 2

Just adjust the margin with the remaining height and width on the profile-picture class.
The remaining size is 10% height and 10% weight. So there will be +5%(-45%) on the left margin and +5%(-45%) on the top margin. It will make the circle center
.start-container{
height: 100vh;
display: grid;
grid-template-rows: 20% 65% 15%;
grid-template-areas:
"header"
"startpage"
"footer"
;
}
.header{
}
.header-shape{
height: 100%;
background-color: blue;
clip-path: polygon(0 60%, 100% 40%, 100% 100%, 0% 100%);
}
.profile-shape{
position: absolute;
top: 7vw;
left: 65vw;
width: 10vw;
height: 10vw;
background-color: blue;
border-radius: 50%;
filter: drop-shadow(0px 3px 30px rgba(0,0,0,0.60));
}
.profile-picture{
width: 90%;
height: 90%;
background-color: white;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -45% 0 0 -45%;
}
.startpage{
}
.footer{
background-color: yellow;
}
<div class="start-container">
<div class="header">
<div class="profile-shape">
<div class="profile-picture"></div>
</div>
<div class="header-shape"></div>
</div>
<div class="startpage"></div>
<div class="footer"></div>
</div>