Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Styling Property : Position

The CSS position property enables you to define where on a page you want an item placed. We will cover 4 values of the CSS position styling property: Static, Absolute, Relative and Fixed.

People will view your website with mobile devices, monitors of different sizes, and even large televisions. So you can't predict the dimensions and use them to determine the exact placement of onscreen elements but you can do things like position a text caption above or below an image, place a logo anywhere on the page, and much more.

Using the CSS position property, you can place a sidebar anywhere you want, or make sure a navigation bar is always displayed at the top of the page even once a user scrolls down the page.

Position: static

Static positioning means the content follows the normal top-down flow of HTML. Static is the normal positioning method so unless you are overwritting a previously set style you won't need to specify to use the static position. We've only included it so that you are aware of its existence and what it is called.

Position: fixed

The fixed position will ensure that an item stays fixed in its position no matter what or how the surrounding items are positioned. Some people use this code to create a "Sticky Top" or "Sticky Bottom". NOTE: - You can make an item stick to the bottom or top of the page but in real life, you would either choose sticky top or sticky bottom - not both because it would not give a lot of space for your middle content to be placed and still read easily.

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

RESULTS

results of selecting nested elements in cs

NOTES


A fixed-positioned item is sometimes called "sticky". You may have heard people say they want their website to have a "sticky bottom".

Position: absolute

The absolute position style can be set by defining an element's top, bottom, left, or right position using pixels, ems, or percentages. Absolutely positioned elements are detached from the flow of the page - meaning the other elements on the page aren't even aware that the absolute positioned item exists!

Special note about the absolute position property: You can only use the 'static' property with this element. The 'float' or any other type of positioning other than static simply won't work.

Position: relative

The relative position style will place an item relative to the item just above it (it's parent).

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

RESULTS

html code example of images in the aside element

NOTES


A relatively positioned element is placed relative to its current position in the HTML flow. The main benefit of relative positioning is to set a new point of reference for absolutely positioned elements.

How To Style Absolute & Relative Positioning


After you watch the video on absolute & relative positioning, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write something like "I am familiar with the difference between absolute and relative". But if you still don't understand something, please write that in your comments too. (43 minutes.

Practice writing CSS for items to be absolutely positioned and relatively positioned.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved