My Notes
Positioning Elements
Position: static
"The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value."
Position: absolute
"The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left."
Position: relative
"The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static."
Position: sticky
"The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements."
Position: fixed
"The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport.."
Selectors and Combinators
| Name | Example | Definition |
|---|---|---|
| Universal Selector | * | Selects everything |
| Class Selector | .bigheading | Selects a tag with the given class attribute |
| ID Selector | #main-text | Selects a tag with the given ID attribute (note: IDs must be unique) |
| Type Selector | div | Selects a specific tag |
| Attribute Selector | [attr="value"] | Selects a tag with the given value for an attribute, or any tag with the given attribute if a value isn't specified |
| List Selector | h1, h2, h3 | Selects many individually specified tags |
| Decendant Combinator | div p | Selects a tag within another (ex. paragraph anywhere within a div) |
| Child Combinator | div > p | Selects a tag directly nested one level inside another |
| General Sibling Combinator | h3 ~ p | Selects a tag that follows at the same level (ex. any paragraphs at the same level as any h3) |
| Adjacent Sibling Combinator | h2 + h3 | Selects a tag that immediately follows another (ex. h3 that immediately follows any h2) |