CSS Position absolute not working with relative parent-CodePudding

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 >
<div  *ngIf="portfolio">
  <div >
    <div >$10.00</div>
    <div >AVAILABLE</div>
  </div>
  <div > </div>
  <div >
    <div >$12.31</div>
    <div >TOTAL ALLOCATED </div>
  </div>
  <div > </div>
  <div >
    <div >$0.73</div>
    <div >PROFIT</div>
  </div>
  <div >=</div>
  <div >
    <div >$23.04</div>
    <div >EQUITY</div>
  </div>
</div>
</div>

But I am trying to put the <div > </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?

CodePudding user response：

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  *ngIf="portfolio">
  <div >
    <div >$10.00</div>
    <div >AVAILABLE</div>
  </div>
  <div  id="op1"> </div>
  <div >
    <div >$12.31</div>
    <div >TOTAL ALLOCATED </div>
  </div>
  <div  id="op2"> </div>
  <div >
    <div >$0.73</div>
    <div >PROFIT</div>
  </div>
  <div  id="op3">=</div>
  <div >
    <div >$23.04</div>
    <div >EQUITY</div>
  </div>
</div>