I am attempting to organize 3 divs in a row using Flex.
ISSUE 1: The div that is centered is set with position: fixed. However, the two other divs on each side do not stay aligned with the centered fixed div when scrolling. If I change the centered div to position: sticky, it moves down to the middle of the page instead of staying at the top.
ISSUE 2: Additionally, there is a shape element positioned behind these 3 divs. The intention is for the two side divs to be placed beneath the shape by setting z-index: -1 on both sides, but this was unsuccessful.
The padding on the two side divs is set to padding-top: 450px in order to keep the content lower than the centered div, as depicted in the prototype screenshot.
(UPDATED) - JSFiddle for the SECOND ISSUE.
This Adobe XD prototype showcases how it should appear -
(UPDATED) - https://i.sstatic.net/BUHV8.png
Your assistance is greatly appreciated!
html,
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-color: #12212A;
}
.body-wrapper {
position: absolute;
margin: 0 auto;
width: 100%;
background: #12212A;
display: flex;
align-items: center;
justify-content: center;
}
.row-profile {
color: white;
border: #3D4B57 solid 1px;
}
.body-wrapper>.row-profile {
flex: 1 1 30%
}
#profile-left {
text-align: right;
padding-right: 44px;
padding-top: 450px;
height: 1520px;
width: 455px;
background-color: #12212A;
}
#profile-center {
text-align: center;
background-color: #3D4B57;
padding-top: 0;
top: 0;
margin-top: 0;
width: 366px;
height: 250px;
position: fixed;
}
#profile-right {
padding-left: 44px;
padding-top: 450px;
height: 1520px;
width: 455px;
background-color: #12212A;
}<div class="body-wrapper">
<div class="row-profile" id="profile-left">LEFT (content see JSFiddle link)</div>
<div class="row-profile" id="profile-center">CENTER LEFT (content see JSFiddle link)</div>
<div class="row-profile" id="profile-right">RIGHT (content see JSFiddle link)</div>
</div>