<section id="container">
  <div id="block-sibling-with-content">1 block sibling with content</div>
  <div id="block-sibling-empty"></div>
  <div id="absolute-element">3 absolute-element</div>
  <div id="block-to-overlay">
    <p>4 block to overlay</p>
    <p>covered</p>
  </div>
</section>

/* Android legacy stockbrowser fix
 * an element with absolute position will not refer to the preceeding visible block level element if it's content is empty
 * therefore to correctly display it we can either
 * 1) force repaint via js by reapplying the position property on the single affected element (global repaint won't work)
 * 2) give a 1px clutter to the empty element via pseudo content, as below
 */

#block-sibling-with-content {
  background: red;
  margin-bottom: 10px;
}

#block-sibling-empty {
  background: purple;
  // fix Android
  &:after {
    content: '';
    display: block;
    height: 1px;
  }
}

#absolute-element {
  background: orange;
  position: absolute;
  margin-top: 15px;
  width: 100%;
}

#block-to-overlay {
  background:pink;
}

// Or to account any element, may have side-effects
*:empty:after {
  content: '';
  display: block;
  height: 1px;
}