05_positioning
dz / mdn / css / 3_css_layout / 05_positioningSummary
Positioning
Node Tree
Nodes
| positioning | |
| content | positioning |
| children | fixed_pos, outside_normal_flow_diff_bhvr, rel_pos, static_positioning, sticky_pos, abs_pos |
| outside_normal_flow_diff_bhvr | |
| content | takes elements outside of normal flow and makes them behave differently |
| parents | positioning |
| static_positioning | |
| content | static positioning |
| children | static_pos_default |
| parents | positioning |
| static_pos_default | |
| content | default behavior: puts elements into normal position in document flow |
| parents | static_positioning |
| rel_pos | |
| content | relative positioning |
| children | hybrid_rel_fixed, modify_after_placement, pos_direction |
| parents | positioning |
| modify_after_placement | |
| content | after placement in normal flow, modify final position |
| parents | rel_pos |
| pos_direction | |
| content | top/left/bottom/right: used alongside position to specify where to move positioned element to |
| children | top_left_pushes_down_right |
| parents | rel_pos |
| top_left_pushes_down_right | |
| content | top/left will push box down and to the right |
| parents | pos_direction |
| abs_pos | |
| content | absolute positioning |
| children | initial_containing_block, not_in_normal_flow, positioning_context, z_index, abs_pos_directions |
| parents | positioning |
| not_in_normal_flow | |
| content | no longer exixsts in normal flow. sits in own layer separate from everything else |
| children | creates_isolated_UI_features |
| parents | abs_pos |
| creates_isolated_UI_features | |
| content | can create UI features isolated from other page elements that do not interfere |
| parents | not_in_normal_flow |
| abs_pos_directions | |
| content | top/bottom/left/right specifies distance from each of the containing element sides |
| parents | abs_pos |
| initial_containing_block | |
| content | initial containing block |
| children | used_when_no_anc_blocks_have_pos, viewport_dims, contains_html_elem |
| parents | abs_pos |
| used_when_no_anc_blocks_have_pos | |
| content | used when no ancester blocks have their position explicitely defined |
| parents | initial_containing_block |
| viewport_dims | |
| content | dimensions of viewport |
| parents | initial_containing_block |
| contains_html_elem | |
| content | contains HTMl element: absolute positioned element displayed outside <html>, position relative to initial viewport. |
| parents | initial_containing_block |
| positioning_context | |
| content | positioning context: which element the absolutely positioned element is positioned relative to |
| children | set_pos_on_anc |
| parents | abs_pos |
| set_pos_on_anc | |
| content | set position on one of elements ancesters |
| parents | positioning_context |
| z_index | |
| content | z-index |
| children | higher_above_lower, z_axis (similar to), change_stacking_order |
| parents | abs_pos |
| z_axis | |
| content | z-axis |
| parents | z_index |
| change_stacking_order | |
| content | used to change stacking order of absolutely positioned elements |
| children | higher_above_lower |
| parents | z_index |
| higher_above_lower | |
| content | higher values go above lower values |
| parents | change_stacking_order, z_index |
| fixed_pos | |
| content | fixed positioning |
| children | fixes_rel_to_viewport, hybrid_rel_fixed |
| parents | positioning |
| fixes_rel_to_viewport | |
| content | usually fixes items in place relative to viewport |
| children | fixed_pos_exception (almost always true, with on exception) |
| parents | fixed_pos |
| fixed_pos_exception | |
| content | exception: one of the element ancestors is a fixed containing block because its transform property is non-nnone |
| parents | fixes_rel_to_viewport |
| sticky_pos | |
| content | sticky positioning |
| children | hybrid_rel_fixed, rel_until_thresh_then_fixed, scrolling_index |
| parents | positioning |
| hybrid_rel_fixed | |
| content | hybrid of relative and fixed positioning |
| parents | fixed_pos, sticky_pos, rel_pos |
| rel_until_thresh_then_fixed | |
| content | relative positioning until it scrolls past a threshold, then it is fixed positioning |
| parents | sticky_pos |
| scrolling_index | |
| content | Scrolling Index |
| children | dt_dl |
| parents | sticky_pos |
| dt_dl | |
| content | <dt> and <dl> |
| parents | scrolling_index |