CSS - Placement of a div in the lower left-hand corner

Question

I wish I were a CSS smarty ....

How can you place a div container in the lower left-hand corner of the web page; taking into account the users scroll-position?

Answer 1

To position an element relative to the "viewport" (the window or frame it's in), and have it ignore how that viewport is scrolled, you can use the position: fixed; property value (MDN documentation). This has been supported by every browser since Internet Explorer 7.

To position the element at the bottom-left of the window, we need to also specify that it should be positioned at 0 distance from the bottom and left:

position: fixed;
bottom: 0;
left: 0;

Full Example

.bottom-left {
  position: fixed;
  bottom: 0;
  left: 0;
}

.alert {
  border: 2px solid red;
  background: white;
  font-weight: bold;
  padding: 1em;
}

<div class="bottom-left alert">
  Look at me!
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim diam arcu, a gravida justo malesuada et. Fusce iaculis, dui laoreet ultricies congue, arcu lectus rhoncus neque, ut molestie magna augue ut neque. Duis in feugiat ipsum, et imperdiet nunc. Cras convallis lorem eu diam malesuada malesuada. Nunc dapibus suscipit ligula, vel mattis eros blandit id. In placerat justo vitae pretium fermentum. Proin ac erat commodo nibh ullamcorper feugiat. Nulla ultricies maximus massa, non semper dolor malesuada vel. Nullam sem justo, bibendum vel tempus pharetra, gravida vel sapien. Morbi facilisis tristique mauris vel elementum. Ut porttitor egestas metus eget auctor. Phasellus efficitur rutrum massa nec fringilla. Aliquam et imperdiet leo. Sed tincidunt hendrerit tortor eget tempor.</p>

<p>Sed vel dolor lectus. Nulla sed blandit lacus. Mauris ac magna nec libero vehicula aliquet id a libero. Vivamus sed lobortis velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at feugiat sapien, ut commodo mi. Quisque scelerisque maximus efficitur. In ultrices, magna eu semper pellentesque, tellus odio hendrerit augue, ut porta sapien lacus quis odio.</p>

<p>Duis sodales, dui a condimentum imperdiet, tellus est laoreet velit, a viverra risus libero sed urna. Phasellus sollicitudin tincidunt viverra. Proin vulputate leo at justo auctor feugiat. Nam auctor, mauris at commodo tempus, eros diam varius ligula, vitae efficitur massa lectus et enim. Integer tristique nibh in lacus condimentum, et interdum urna mollis. Aenean id risus tristique, volutpat dolor sed, fermentum ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam velit nibh, elementum at orci quis, tempor fermentum tellus. Nunc facilisis nisi at leo auctor aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam tempor ipsum vel scelerisque tincidunt. Etiam vulputate auctor ante, in tristique est congue ut. Vestibulum maximus nibh vestibulum tristique ullamcorper. Phasellus eu eleifend ante, nec efficitur nulla.</p>

<p>Nunc pulvinar purus id arcu egestas, sed iaculis nisl finibus. Sed cursus bibendum tortor, id cursus lacus euismod in. Nam lacinia, sapien faucibus dapibus varius, neque velit fringilla est, in porta quam sem sit amet ligula. Aliquam ornare est ac pellentesque suscipit. Curabitur eleifend convallis sem, volutpat efficitur erat laoreet id. Maecenas interdum ante in lectus varius, lobortis auctor quam rutrum. Nullam tristique felis quis lectus luctus gravida. Cras porttitor pellentesque nibh. Fusce placerat vehicula commodo. Mauris vel lectus viverra sem consectetur sagittis quis vel lectus. Quisque vel dapibus augue. Sed lacinia massa quis dui sodales faucibus.</p>

<p>Donec sagittis, dolor sed fermentum dapibus, justo ipsum porttitor purus, sed fermentum mi nulla non lorem. Praesent aliquet iaculis molestie. Phasellus enim nunc, vestibulum non odio vel, porta imperdiet lorem. Morbi laoreet felis a ipsum elementum sollicitudin. Morbi varius mollis ex, a posuere lorem fringilla ac. Curabitur metus ligula, mollis quis diam eu, pulvinar placerat libero. Aenean vestibulum lacinia diam in facilisis. Praesent egestas sapien a est consequat facilisis. Nulla id mauris a metus venenatis pellentesque. Praesent justo augue, efficitur ac vulputate et, luctus at elit. Proin quis urna quam. Pellentesque iaculis, felis sed hendrerit venenatis, purus augue venenatis tellus, a posuere justo tellus at ex. Donec et arcu non arcu scelerisque efficitur nec sed dolor. Sed eget lacus enim. Donec sodales mollis condimentum.</p>