CSS Position absolute not working with relative parent - html

Question

I have a problem. In my angular project I have the following code:
.portfolio-summary-container {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
.portfolio-summary {
display: inline-flex;
position: relative;
width: 100%;
height: 100%;
}
.portfolio-summary .section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
border: #c2c2c2 solid 1px;
}
.portfolio-summary .section-operator {
position: absolute;
left: calc(25% - 17px);
margin-top: 23px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: #b9b9b9 solid 1px;
color: #808080;
font-size: 1.8rem;
background-color: white;
}
.portfolio-summary .section .price {
font-size: 1.3rem;
font-weight: bold;
}
.portfolio-summary .section .description {
font-size: 1rem;
color: #808080
}
<div class="portfolio-summary-container">
<div class="portfolio-summary" *ngIf="portfolio">
<div class="section">
<div class="price">$10.00</div>
<div class="description">AVAILABLE</div>
</div>
<div class="section-operator">+</div>
<div class="section">
<div class="price">$12.31</div>
<div class="description">TOTAL ALLOCATED </div>
</div>
<div class="section-operator">+</div>
<div class="section">
<div class="price">$0.73</div>
<div class="description">PROFIT</div>
</div>
<div class="section-operator">=</div>
<div class="section">
<div class="price">$23.04</div>
<div class="description">EQUITY</div>
</div>
</div>
</div>
But I am trying to put the <div class="section-operator">+</div> between every section, so it would look like this:
I read that I need to give the parent: position: relative;, so thats why I created the portfolio-summary-container. The container is sticking to the bottom and the inner div has the position: relative; property, but this isn't working for some reason??? How can I get the result from the photo?

Answer 1

You can position each operator separately. I added z-index for the operators to be in the foreground.
.portfolio-summary {
display: inline-flex;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
.portfolio-summary .section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
border: #c2c2c2 solid 1px;
}
.portfolio-summary .section-operator {
position: absolute;
margin-top: 23px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: #b9b9b9 solid 1px;
color: #808080;
font-size: 1.8rem;
background-color: white;
z-index: 2;
}
.portfolio-summary .section .price {
font-size: 1.3rem;
font-weight: bold;
}
.portfolio-summary .section .description {
font-size: 1rem;
color: #808080
}
#op1 {
left: calc(25% - 17px);
}
#op2 {
left: calc(50% - 17px);
}
#op3 {
left: calc(75% - 17px);
}
<div class="portfolio-summary" *ngIf="portfolio">
<div class="section">
<div class="price">$10.00</div>
<div class="description">AVAILABLE</div>
</div>
<div class="section-operator" id="op1">+</div>
<div class="section">
<div class="price">$12.31</div>
<div class="description">TOTAL ALLOCATED </div>
</div>
<div class="section-operator" id="op2">+</div>
<div class="section">
<div class="price">$0.73</div>
<div class="description">PROFIT</div>
</div>
<div class="section-operator" id="op3">=</div>
<div class="section">
<div class="price">$23.04</div>
<div class="description">EQUITY</div>
</div>
</div>