CSS - scale down child elements automotically when use absolute position

0 votes
1,053 views
added Sep 15, 2021 in CSS by lcjr First Warrant Officer (11,560 points)
edited Sep 15, 2021 by lcjr

Its handy for child element that uses absolute position for positioning within parent <div> which has background image. Use position: absolute, and percentage height and width (instead of typical exact pixel), to avoid major breakpoints implementation, which what px lack at. 

<div class="parent-with-background-image">
  <div class="child-with-absolute-position"></div>
</div>

<style>
  .child-with-absolute-position {
    position: absolute;
    background: transparent;
    width: 50%;
    @media (min-width: 1024px) {
      height: 284px;
    }
    height: 9%;
    margin-top: 52%;
    margin-left: 46%; 
    &:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  }
</style>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...