MEDI 220 - CSS Layouts Part 2: Positioning

VIU Media Studies Department - Robin Davies

Lecture Overview

Review: The Box Model
Positioning
Review: Element Height & Width
z-index and overflow

Review: Important Terms

Normal flow
Nonreplaced elements
Replaced element
Document Object Model

Review: Structuring Documents

Use div or HTML 5 content elements to divide your page into logical structures: header, nav, section...
Put your HTML structure in the order that would make sense even if the CSS did not display
Use comments to identify CSS rules which apply to different parts of the HTML

Review: The CSS Box Model

With CSS, we can control both the appearance and position of each element's box
Most CSS boxes are either inline or block
A box's content model (block or inline) is controlled by the default CSS for the HTML page
- By default all elements are displayed in the normal HTML flow from top to bottom, left to right
- Because they have their display property set to block in default CSS, block level elements "stack" vertically in the browser

Review: Padding, Borders & Margins

Padding is transparent, Borders are not transparent (unless they have gaps), Margins are transparent
Background images for an element will fill the area inside the element's border
Everything from the outside edge of the border inward is commonly referred to as the visible element box
The margin is not visible and is therefore not part of the visible element box

Element Box `Position`

Static: Leave in the normal flow - the default for browsers/elements
Absolute: Remove from the normal flow; specify coordinates with respect to an ancestor element's containing block
Fixed: Remove from the normal flow; specify exact coordinates with respect to the browser window
Relative: Leave in the normal flow, but offset it from normal position
Sticky: Same as relative until the user scrolls past a specific location

Relative Positioning

Moving an element with respect to its original location in the natural flow is called relative positioning
Surrounding elements are not affected at all

.rel { 
	position: relative; 
	top: -1.1em; 
	left: 1em;
}

Note: The term relative refers to the element's original position, not surrounding or parent elements
Note: Other elements are not affected by the offsets. A hole may be left where the relatively positioned element was originally, and the element may overlap with other elements.

Absolute Positioning

Remove elements from the normal flow; position them absolutely with respect to the containing block of their closest ancestor element which has its position set to something other than static. Demo.

.abs { 
	position: absolute; 
	left: -112px; 
	top: 5em;
}

Add position: relative to the ancestor element in relation to which you want your element to be offset - if you don't do this, the browser will use the body element.
Note: Absolute elements are removed from the normal flow so they can, and often do, overlap other elements

Fixed Positioning

CSS allows elements to be affixed to the browser window so that they do not scroll
Use the fixed value to accomplish this:

.fix { 
	position: fixed; 
	bottom: 10px; 
	width: 50%;
}

Note: Offsets of a fixed element are relative to the browser window

Sticky Positioning

Stickily positioned elements behave a little like relatively positioned elements and a little like fixed positioned elements.
Use the sticky value to accomplish this:

.sticky { 
	position: sticky; 
	top: 0; 
}

Demo (likely for nav bars)
Note: Stickily positioned elements will very likely overlap with other content!

Positioning Notes

A few things to note about positioning:
- Never Forget: Elements default to normal flow and always, in a sense, seek to return to that behaviour
- Offset properties (top, bottom, left, right,) don't work unless you're also using the position property
- Typically it is a bad idea to combine the position and float properties in a single declaration
- Positioning in not inherited, and the initial position value for all elements is static
- Relative I
- Relative II
- Absolute, Fixed

Review: Element Width & Height

You can set the width and height of most elements
- width: 100px;
- height: 50px;
If you don't explicitly set these, auto is used
So, by default an element will expand when its content expands; therefore it's very dangerous to set a fixed height for an element
Note: Percent values are relative to the parent element, not the original size of the set element

Auto

The auto value can be applied to an element's width, height, or margins
If you set width to auto (which is default, anyways), its value will normally be the containing block minus any margins, padding and borders
The containing block is equal to the width of the parent element's content area, the parent's width value
If you manually set the width, margin-left and margin-right values but, together with border and padding, they don't equal the size of the containing block, then the browser overrides whatever value you set for margin-right and sets it to auto
If you manually set the width, but set one of the margins to auto, that margin will stretch or shrink to make up the difference

More Auto

If you manually set width, but leave both margins set to auto, both margins will be set to the same maximum value and your element will be centered within the containing block (handy !!!)
Replaced elements have an auto width equal to their content
Floated elements have a auto width of 0
Non-floated inline elements ignore the width property altogether
Note: Browsers never adjust the quantity of borders or padding
Experiment with auto

z-Index I

If positioned (position other than static) elements overlap, you can specify the order in which they overlap with the z-index property
z-index values are positive or negative integers - elements with higher values appear closer to the user
If two positioned elements have the same z-index, the one later in the document flow will appear on top
This can cause serious usability problems!

z-Index II

<p style="position: relative; left: 25%;">
	<span style="position: absolute; top: 0em; left: 0em;
	font: bold 3em monospace; color: red; z-index: 1;">
	Shadow </span>

	<span style="position: absolute; top: 0.05em; left: 0.05em;
	font: italic bold 3em monospace;"> Shadow </span>
</p>

Shadow Shadow

We definitely don't make shadows like this anymore—there is a text-shadow property for that—but you get the idea.

Overflow

Sometimes the element box is not big enough to contain all the content, or content has been positioned outside its box
- overflow: visible | hidden | auto | scroll | inherit;

Visible: expands the element box so that the content fits (usually creating negative margins) - this is the default option
Hidden: hides any content outside the element box
Scroll: adds scroll bars so overflowing content can be viewed within the element box
Auto: adds scroll bars only if they are needed, but also forces the element in question to expand and contain all its children, even floated children

Overflow Examples

Elements formatted with pre are a good way to view overflow at work. Here are hidden, auto, and visible:

Supercallifragilisticexpialidocious

Supercallifragilisticexpialidocious

Supercallifragilisticexpialidocious