DIGI 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
  • Examples of logical structures (using CSS syntax here) might include:
    • #featured, article, #calendar, footer, header
  • 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!
  • Note: sticky may not yet work in all browsers!

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
  • Nonfloated 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: bold 3em monospace;"> Shadow </span>
</p>

Shadow Shadow

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

Overflow Examples

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

Supercallifragilisticexpialidocious
Supercallifragilisticexpialidocious
Supercallifragilisticexpialidocious