-->

Positioning Stuff

static, relative, absolute, fixed, or sticky

push pin

Static

This is the default.

Changing the top/bottom/left/right properties will do nothing.

This div has it's position set to static.

push pin

Relative

If you set the position:relative - it is going to be placed relative to it's normal position... Where it would have been on the page. Had you not gone messing with it.

So, if we set top/bottom/left/right property it is going to be adjusted as such.

The positioning of a relative placed element has no effect on other elements on the page.

I can show you better than I can tell you.

This div - that has the black border has a height set to 500px.

Spicy jalapeno fatback nisi consectetur dolore sirloin minim voluptate quis pancetta. Proident incididunt chuck strip steak kevin dolor deserunt tri-tip non magna hamburger ea cupidatat. Shoulder jerky eiusmod anim, beef ribs dolor velit reprehenderit pariatur pork loin prosciutto. Dolore andouille deserunt boudin biltong ham hock mollit ex. Et dolore consequat, sed non pork belly laborum officia short loin spare ribs. Tenderloin officia in chicken. Turducken elit tail consectetur. Qui chuck ipsum laboris prosciutto frankfurter. Sint bacon filet mignon, jowl eu sausage kielbasa.

This div has it's position set to relative.

top: -100px;

left: 75px;

So it's moved 100px up and 75px left from where it would have been.

We'll cover some bacon ipsum text.

push pin

Absolute

Element that has its position set to absolute, is removed from the document flow.

Absolute position.

Will take up full width of the parent element and height depends on content.

This div is set to:

right: 5px;

bottom: 5px;

So, unlike the relatively positioned elements others elements will act as though this does not exist.

It's position is based on its nearest ancestor. If its parent does not have position set of, absolute, relative or fixed.

It will then be set on the nearest ancestor that does.

Hit F12 and check out where that orange div is in the HTML structure.

push pin

Fixed

Kind of like absolute positioning, but it's going to stay in the viewport.

Think fixed navbar.

You should see an obnoxious blue div that reads:

"This bad boy has position: fixed;"

This bad boy has position: fixed;

push pin

Sticky

Here's your two for one...

It's going to be relatively positioned until it hits the spot you define.

Then it will be treated as a sticky element.

Here we have the headings set to have:

position: sticky;

top: 0;

Scroll in the div below.

Start - Stick 1

Spicy jalapeno fatback nisi consectetur dolore sirloin minim voluptate quis pancetta. Proident incididunt chuck strip steak kevin dolor deserunt tri-tip non magna hamburger ea cupidatat. Shoulder jerky eiusmod anim, beef ribs dolor velit reprehenderit pariatur pork loin prosciutto. Dolore andouille deserunt boudin biltong ham hock mollit ex. Et dolore consequat, sed non pork belly laborum officia short loin spare ribs. Short ribs ut do meatball in ribeye laborum commodo brisket est. Pork chop flank turducken sirloin buffalo corned beef, swine drumstick boudin alcatra short loin ut. Velit in anim prosciutto buffalo. Alcatra short ribs in swine andouille nostrud. Meatball hamburger sint, filet mignon buffalo tail beef ribs consequat ut pancetta drumstick picanha chicken. Doner ad ham hock culpa pork tongue. Buffalo ut salami, swine prosciutto excepteur ullamco andouille id t-bone.

Second One

Salami shoulder sunt filet mignon ea brisket culpa magna, tail incididunt chicken irure labore excepteur leberkas. Velit tri-tip tempor ut duis ribeye ut tenderloin eiusmod biltong. Id pork loin culpa consectetur meatloaf in magna strip steak. Et sunt spare ribs lorem ham elit, hamburger leberkas laboris. Frankfurter pancetta ut, aliquip pork chop flank jerky. Culpa bresaola et, shankle veniam salami tempor porchetta strip steak bacon meatloaf ham hock. Anim sirloin rump tail ipsum eu meatball burgdoggen andouille qui. Pork anim in sausage capicola magna pork loin laboris nulla dolore dolore kevin aliquip labore. Ex nostrud nulla shankle picanha swine sint chuck.

Third One

Tenderloin officia in chicken. Turducken elit tail consectetur. Qui chuck ipsum laboris prosciutto frankfurter. Sint bacon filet mignon, jowl eu sausage kielbasa.

Brisket rump ut consectetur pariatur. Fatback pastrami consectetur non pancetta deserunt in tenderloin flank ut ex salami. Kielbasa minim dolore labore. Cupim biltong sunt picanha nulla prosciutto. Leberkas mollit pork belly andouille ham magna irure consectetur shank. Meatball bacon elit pastrami, adipisicing in deserunt burgdoggen pariatur ribeye. Short loin meatloaf proident, reprehenderit in dolore strip steak prosciutto flank aliquip excepteur nulla veniam pork belly pariatur.

Burgdoggen bresaola jerky pork chop, cillum kielbasa dolor sunt commodo. Capicola eiusmod in flank rump buffalo. Sunt biltong dolore turducken leberkas, filet mignon id. Burgdoggen voluptate labore porchetta fatback tri-tip kevin turkey ut alcatra sed in meatloaf pork loin ball tip. Sint kielbasa id lorem doner. Non elit deserunt, enim exercitation turducken meatloaf commodo ham hock kevin pork loin. Ground round tempor cupidatat ribeye ad jowl corned beef turkey minim. Deserunt beef ribs doner, turducken spare ribs elit esse ribeye ad fugiat ham hock pastrami mollit bacon shankle.