Why position absolute affects opacity?-CodePudding

I have come across an interesting moment for myself and would like to figure out how it works.

Here are 2 examples in the sandbox. On one without position: absolute, the opacity is different from where position: absolute is applied. Why does positioning affect the degree of opacity in this case?

.wrapper {
  position: relative;
  text-align: center;
  width: 300px;
}

.text-wrap {
  border-bottom: 3px solid #202122FF;
  opacity: 0.5;
}

.text {
  right: 40%;
  bottom: -7px;
  position: absolute;
  padding: 0 5px;
  color: #202122FF;
  background-color: white;
}

<div >
  <div >
    <span >
              Some text
            </span>
  </div>
</div>

preview with position: absolute

And the same template without position: absolute

.wrapper {
  position: relative;
  text-align: center;
  width: 300px;
}

.text-wrap {
  border-bottom: 3px solid #202122FF;
  opacity: 0.5;
}

.text {
  right: 40%;
  bottom: -7px;
  /* position: absolute; */
  padding: 0 5px;
  color: #202122FF;
  background-color: white;
}

<div >
  <div >
    <span >
              Some text
            </span>
  </div>
</div>

preview without position: absolute

CodePudding user response：

You have opacity set on the wrapper of that element. If the wrapper has opacity then it will transfer to the children of the element. To fix you need to move the text somewhere on the outside of the element.

HTML:

 <div >
      <div >
        
      </div>
      <span >
        Some text
      </span>
    </div>

CSS:

  .wrapper {
    position: relative;
    text-align: center;
    width: 300px;
  }

  .text-wrap {
    border-bottom: 3px solid #202122FF;
    opacity: 0.5;
  }

  .text {
    right: 40%;
    bottom: -7px;
    position: absolute;
    padding: 0 5px;
    color: #202122FF;
    background-color: white;
  }

CodePudding user response：

It is not about position, but where stands the span .

.wrapper {
  position: relative;
  text-align: center;
  width: 300px;
}

.text-wrap {
  border-bottom: 3px solid #202122FF;
  opacity: 0.5;
  line-height:0/* span/text  will overflow now */
}

.text {
  right: 40%;/* no effect on static position*/
  bottom: -7px;/* no effect on static position*/
  /* position: absolute; */
  padding: 0 5px;
  color: #202122FF;
  background-color: white;
}

<div >
  <div >
    <span >
              Some text
            </span>
  </div>
</div>