<!DOCTYPE html>
<!--
 | If the element has "position: absolute", the containing block is established
 | by the padding edge of the nearest ancestor with a "position" of "absolute".
 |   http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
 -->
<html>
<head>
  <style>
    .containing-block-with-padding {
      position: absolute;

      width: 150px;
      height: 150px;

      padding-top: 50px;
      padding-left: 50px;

      background-color: rgb(100, 100, 255);
    }
    .stacking-context {
      position: static;

      opacity: .9;
    }
    .absolute-element {
      position: absolute;

      width: 100px;
      height: 100px;

      background-color: rgb(255, 100, 100);
    }
  </style>
</head>
<body>
  <div class="containing-block-with-padding">
    <div class="stacking-context">
      <div class="absolute-element"></div>
    </div>
  </div>
</body>
</html>