Position fixed

by wistcc

HTML

<div class="container">
Container element
<div class="child">Child element</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione, aspernatur quo quae aperiam voluptatum tempore expedita quidem. Culpa possimus dignissimos laborum asperiores quasi aut quia, adipisci quae quaerat error veritatis accusantium eaque! Id explicabo, fugit. Modi omnis sapiente ratione cupiditate perferendis atque ea voluptatibus, voluptate, suscipit rem asperiores quis, neque officiis odit repellat minus aliquam, a ab optio nam sed molestiae alias? Porro, soluta, aliquam commodi maxime eligendi recusandae iure nemo illum, voluptas illo voluptate! Eligendi, provident ratione aspernatur ut. Facere amet dicta aliquid voluptatum eveniet, distinctio officiis deserunt, nemo? Autem cumque laborum quaerat nisi qui accusantium quos ut natus doloribus sunt dolore, mollitia facilis cum fuga quas necessitatibus earum iure fugit, sed deleniti. Nemo perspiciatis ut accusamus, iure minima! Assumenda velit fugit dolor porro sit, aperiam doloremque ipsam deserunt animi et ducimus qui voluptate officiis nesciunt commodi, deleniti omnis iure officia eum consectetur aut perferendis similique! Sint accusantium velit minus perferendis doloremque, voluptatem unde, cupiditate cum. Saepe doloremque voluptatem ea neque, earum, veniam omnis eligendi quaerat nam consequuntur vero ducimus, laboriosam molestiae architecto aliquid quisquam error nobis repudiandae voluptate ratione reprehenderit et ullam id! Delectus quisquam consectetur, repudiandae dignissimos error repellat ipsum ipsa autem, praesentium. Facilis doloremque magnam velit sit, dolorem amet obcaecati officia maiores cumque? Distinctio consectetur necessitatibus perferendis sunt odio, inventore amet laboriosam, ratione, labore, cumque quidem assumenda! Ipsa corporis consequuntur, aut. Quam laboriosam nesciunt...

CSS

body {
  height: 250px;
  overflow-y: scroll;
}

.container {
  color: white;
  padding: 70px;
  position: relative;
  background-color: black;
}

.child {
  background-color: black;
  opacity: .65;
  padding: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}