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

0 votes
19 views
added Sep 15 in CSS by lcjr Second Warrant Officer (6,120 points)
edited Sep 15 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.
...