Are you first timer at lazacode.org? Why not join us and start exchange your programming knowledge with everyone. Register today!

CSS - scale down child elements automotically when use absolute position

+1 vote
564 views
added Sep 15, 2021 in CSS by lcjr First Warrant Officer (7,650 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>

 

Please log in or register to response this reference.

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