Welcome to class #3!!
The position property allows you to tell HTML elements where to go on a page.
CSS elements default to "static" meaning they will flow with other elements in the page.
- Positions elements in browser window, regardless of other elements.
- Can be placed with
top, bottom, right, left
- Positions relative to normal position in the flow of page.
- Relative elements can overlap with other elements.
- Positions relative first parent element, usually .
- Removed from the normal flow of the page.
- CSS elements can overlap, like if you want to show an image with text over it.
z-index to tell which elements go on top.
- Usually assign starting with
- HTML5 semantic tags exist to make this simpler, after certain conventions of layout.
header, nav, footer, article, section, aside, hgroup
- This is similar to assigning properties and values to specific CSS tags.
Two column layout
- This is a basic web page layout that includes a header, container, content column, side bar, and footer.
- Easily made with positioning and floats.
- This is the basic structure we will build:
- Commenting is essential for writing clean, readable code.
- Uses regular language to describe what you are writing.
- HTML comments written:
- CSS comments written:
/* this is a comment */
- Create a two column layout for your site.
- Use CSS box model and positioning to create it.
- Add comments to your HTML and CSS pages.