Why position absolute affects opacity?

user_19597224 0
Viewed 70

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 class="wrapper">
  <div class="text-wrap">
    <span class="text">
              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 class="wrapper">
  <div class="text-wrap">
    <span class="text">
              Some text
            </span>
  </div>
</div>

preview without position: absolute

css html
2 Answers

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.

  .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 class="wrapper">
      <div class="text-wrap">
        
      </div>
      <span class="text">
        Some text
      </span>
    </div>

user_150259830

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 class="wrapper">
  <div class="text-wrap">
    <span class="text">
              Some text
            </span>
  </div>
</div>

user_24420990
Related