CSS Position 绝对不能与相对父级一起使用

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>