[!]
[=title "Week 8: Position"]
[=content-]
<p>
Till now, we've mainly relied on the browser to set positions for us by picking wherever there's space.
This isn't a bad way to do it - in fact, this ensures the most support across devices - but before we start
considering more advanced techniques, we should look at <i>positioning</i>.
</p>
<p>
The CSS <code>position</code> property has five common values: <code>static</code>, <code>fixed</code>, <code>relative</code>, <code>sticky</code>, and <code>absolute</code>.
</p>
<ul>
<li>
<code>static</code> positioning simply accepts wherever makes the most sense to the browser - it's the default for every element.
</li>
<li>
<code>fixed</code> positioning sets a <i>position relative to the viewport</i>: for instance, the floating red div in this page is actually defined
in the code right below this text, but because it has <code>position: fixed;</code>, it completely ignores its location in the document! Check it out with the web inspector.

<!-- hi, intrepid inspector! this is the fixed div: -->
<div style="position: fixed; padding: 20px; color: white; font-weight: bold; top: 200px; left: 100px; background-color: red;">fixed position element example</div>

</li>
<li>
<code>relative</code> positioning is a bit confusing - essentially, it creates a <i>container</i> for an absolute element, so you can have absolute elements
that sorta-respect document flow.
</li>
<li>
<code>absolute</code> positioning lets you set a position <i>relative to the page</i>: it's like <code>fixed</code>, except it moves when you scroll.
For example, the yellow div in this page is absolute positioned; it's defined below in the code:

<!-- hi again! this is the absolute div: -->
<div style="position: absolute; padding: 20px; color: black; font-weight: bold; top: 200px; right: 100px; background-color: yellow;">absolute position element example</div>

</li>
<li>
<code>sticky</code>: Sticky is a strange one! It goes from being essentially <code>relative</code> to being essentially <code>fixed</code> when
a simple condition is satisfied. We won't talk much about sticky in this class, but <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position">MDN</a>
has an example as always.
</li>
</ul>

<p>
Once you have a position set, you need some way to actually control where the element goes - these are <i>not</i> the same thing, because CSS is confusing.
You set the actual location of the element using the <code>top</code>, <code>left</code>, <code>bottom</code>, and <code>right</code> properties.
For instance, the floating color blocks in this page (use the web inspector to see!) have <code>top: 200px;</code>, which pushes them <i>down from the top</i>
by 200 pixels, and have either <code>left: 100px;</code> or <code>right: 100px;</code>, which push them <i>to the right from the left edge</i> or <i>to the left from the right edge</i>.
</p>
<p>
Top, left, bottom, and right should be thought of as <i>setting the distance from the edges of the screen</i>.
</p>

<p>
<b>A word of caution</b>: you should never use absolute positioning. It's just a bad idea. There are many screens, and fitting absolute positioning to screens of
different sizes quickly becomes a nightmare. Whenever possible, use grid or flexbox instead - and seriously consider whether or not you actually <i>need</i>
the fancy positioning, if you aren't able to get it without <code>absolute</code>.
</p>
<p>
We talked briefly in class about the css <code>transform</code> property. We won't be covering transform any more, but it's pretty interesting -
I recommend reading <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform">MDN's page on transform</a> if you're curious.
</p>

<b>Lorem ipsum to produce a scrollbar so you can see what happens to positioned elements when they scroll:</b>
<p>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor arcu nibh, sit amet tincidunt tortor tincidunt quis. Vestibulum eu nisl sed risus gravida viverra. Vestibulum condimentum turpis quam, eget porttitor sapien blandit sit amet. Cras risus tortor, lacinia et blandit nec, lacinia ac ante. Fusce elementum massa enim, varius vestibulum turpis accumsan ut. Duis in elementum dolor. Maecenas vitae ullamcorper est, in porta mauris. Curabitur bibendum, ipsum ut venenatis ultrices, nunc elit eleifend nunc, tincidunt aliquam turpis justo sit amet diam. Mauris nec metus felis. Praesent dui leo, tristique quis mi eget, egestas lobortis augue. Duis ut laoreet ex, aliquam lacinia lorem. Phasellus finibus velit in interdum mattis.

Praesent id venenatis libero. Integer facilisis at velit vitae elementum. In a felis a diam facilisis pretium. Phasellus finibus mollis turpis, at sagittis neque commodo in. Fusce eget venenatis ex. Praesent tristique, nulla ac maximus finibus, lectus leo facilisis risus, ut tristique nibh quam sit amet est. Sed vel nisi dictum lorem laoreet tempor. Nunc tempus accumsan tortor, vel aliquet nunc pellentesque a. Fusce faucibus risus nec lorem ullamcorper, in sollicitudin orci pellentesque. Curabitur aliquet congue leo, at viverra orci placerat vel. Mauris id tellus rutrum, blandit tellus a, ornare magna.

Nunc aliquam, purus at iaculis luctus, nisi massa varius velit, eget condimentum arcu magna vel purus. Nulla nec posuere mi. Fusce nec lacinia eros, sed tristique dolor. Duis pulvinar leo id magna volutpat dapibus. Donec ac condimentum magna. Integer faucibus consectetur elit, quis ullamcorper turpis pulvinar non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu odio rhoncus leo euismod euismod.

Maecenas ut mi nulla. Fusce at leo interdum, hendrerit ex ac, gravida massa. Vestibulum sit amet finibus risus. Donec a diam lorem. Morbi blandit ac augue sed congue. Proin mauris elit, aliquam quis urna vel, euismod condimentum libero. Quisque ex arcu, dignissim eu bibendum sit amet, tincidunt eget ante. Sed pharetra lorem mauris, a tincidunt nunc pretium non. Integer venenatis in eros in molestie. Pellentesque viverra blandit orci, a laoreet ligula elementum sed. Mauris ac faucibus enim. Suspendisse nec lacinia mauris, in eleifend erat. Aliquam ut turpis dolor. Duis vel bibendum eros.

Nulla finibus aliquet nisi eu pharetra. Curabitur id libero fermentum arcu aliquam ultrices a a metus. Integer finibus mauris sit amet est consequat luctus. Donec luctus consectetur tellus, sed convallis ante rutrum nec. Integer nec tortor et arcu luctus finibus vitae quis nisl. Praesent vel justo feugiat, cursus elit sit amet, hendrerit est. Aenean semper egestas volutpat. Aliquam fermentum, nulla non tincidunt volutpat, magna ex condimentum lorem, id bibendum felis ante eget neque. Aliquam vel ex id enim semper cursus. Donec mattis erat in nibh fermentum iaculis. Aliquam condimentum consectetur augue, at tempor felis vestibulum non. Aliquam eleifend urna ut metus sodales tempor. Integer tincidunt arcu in orci rhoncus, et viverra sapien ornare.

Duis venenatis mauris at ex iaculis rhoncus non a augue. Quisque egestas enim nunc, in ultricies erat pretium tempor. Curabitur et purus laoreet, fermentum tortor at, cursus felis. Donec eget neque eu justo vulputate iaculis in at dolor. In iaculis velit id elit blandit bibendum. Etiam eu efficitur ex, vitae porta odio. Fusce tempor purus vitae orci tristique hendrerit. Etiam finibus vitae metus ac luctus. Sed et eleifend eros. Nunc ullamcorper porttitor pharetra. Maecenas aliquam scelerisque purus non aliquam. Phasellus porta lectus mauris. Donec dapibus tincidunt nunc, molestie rutrum odio.

Etiam tincidunt gravida ligula, in molestie purus commodo non. Duis nec dignissim risus, eu iaculis augue. Sed lobortis semper justo, ut varius nulla porta vitae. Aenean vel interdum dolor. Cras venenatis sagittis nunc sed porttitor. Sed dignissim consectetur erat sed molestie. Mauris vitae turpis non risus auctor maximus vel at nisi. Vestibulum imperdiet, urna sed fringilla sodales, nisl elit sollicitudin erat, quis vestibulum massa felis sed eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi vitae fringilla justo. Etiam pretium a dolor et consectetur. Aenean finibus diam mi. Ut vulputate, nibh vitae posuere feugiat, metus nibh condimentum felis, vitae sollicitudin dolor nibh vel lacus. Phasellus venenatis nisi ut vehicula pulvinar. Integer elementum dolor id massa hendrerit aliquam. Aenean accumsan vehicula faucibus. Nunc fermentum convallis nisl, eu maximus nisi dignissim vitae. Donec magna diam, efficitur in euismod tristique, consectetur ac arcu. In vehicula consequat scelerisque.

Vestibulum vitae felis eu lorem mattis consectetur. Nullam ligula lectus, ultricies ac porttitor et, sollicitudin imperdiet dui. Pellentesque imperdiet neque a quam congue vehicula. Nulla in turpis ac quam porta mattis. Morbi eget augue ante. Duis non augue sodales magna pharetra semper. Vivamus auctor velit non placerat imperdiet. Donec lacinia risus ipsum, sit amet mattis dolor consequat ac. Nunc et nulla faucibus, sagittis risus eget, interdum mauris. Praesent sit amet sagittis metus.

Sed rhoncus ullamcorper consectetur. Nullam in commodo lorem. Integer quis vestibulum diam, eget sodales ex. Aliquam luctus sem orci, eu auctor mi mattis at. Suspendisse sit amet mi rhoncus, interdum nibh nec, vulputate ligula. Cras sed velit bibendum metus lacinia egestas quis ac risus. Integer nulla velit, facilisis nec sodales id, bibendum sed ipsum. Praesent id tortor vestibulum, venenatis diam vitae, euismod lacus. Quisque non magna ut neque imperdiet tristique.

Nulla blandit, elit eu pulvinar congue, est neque venenatis tortor, at interdum massa nunc in risus. Aenean euismod nulla mi, eu hendrerit augue lacinia at. Curabitur nec volutpat risus. Vivamus ultricies mauris non arcu tempus facilisis. Quisque sit amet ex facilisis, aliquet ex sed, varius magna. Sed fermentum, diam ultrices pharetra condimentum, justo tortor rutrum diam, ac condimentum mi ex at massa. Proin bibendum velit non velit pretium convallis.

Nullam blandit varius orci. Quisque dui sapien, suscipit ac consequat in, posuere eget mi. Ut varius efficitur ex, in congue lectus tempus ut. In hac habitasse platea dictumst. Nam sed dolor tincidunt, elementum purus et, ultrices mi. Cras sollicitudin mauris ac diam dignissim imperdiet. Nunc orci tortor, tempor in dolor in, interdum ultrices turpis.

In sed tellus nulla. Suspendisse fringilla dapibus turpis quis pulvinar. Aenean ac purus odio. Fusce a quam quis mi convallis ultrices. Donec faucibus dapibus metus vitae molestie. Morbi accumsan lacus id ligula aliquam imperdiet. Quisque feugiat accumsan volutpat. Praesent finibus lobortis erat ut iaculis. Nullam posuere gravida dolor, nec facilisis felis ultrices id.

Sed vel tortor nec nisl malesuada elementum. Nulla suscipit velit sed neque sodales cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus quis massa et dapibus. Integer ultricies tempus libero, nec molestie felis pulvinar sit amet. Integer consequat lobortis felis elementum egestas. Ut tortor ante, placerat in finibus nec, semper ut leo. Ut molestie velit risus, non placerat enim dapibus a. Fusce ex justo, fringilla vel erat a, hendrerit finibus mi. Vestibulum viverra porttitor ultricies. Maecenas venenatis ante nec porttitor bibendum. Curabitur nec massa ullamcorper, scelerisque nulla id, tempor leo. Phasellus placerat metus sed arcu maximus, id scelerisque leo viverra. Duis placerat ligula sit amet tortor hendrerit, sit amet porta sapien finibus. In quis malesuada neque. Vestibulum fringilla urna id neque mattis feugiat.

Fusce dictum aliquet sem a ornare. Donec pulvinar augue a risus aliquam, non accumsan erat scelerisque. Vivamus eget tincidunt nisi. Duis interdum commodo condimentum. Phasellus vitae arcu mollis, feugiat leo ut, vehicula ligula. Morbi vitae dolor condimentum, gravida ligula nec, suscipit mi. Fusce pharetra elit at massa auctor finibus. Proin blandit sapien est, vitae pellentesque arcu consectetur eget. Aliquam facilisis, sem ut dictum molestie, magna ex interdum leo, nec bibendum justo tortor at sem. Phasellus imperdiet massa congue lacus interdum, id consectetur mi tincidunt. 
</p>
[/]
[#template.html]