DTC 355

Positioning

CSS gives us several positioning properties that allow us to have greater control of where things sit on our website.

Relative

An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. It is not removed from the flow of the page and other content will not be adjusted to fit into any gap left by the element.

Absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Absolute positioned elements are removed from the page flow and can overlap elements. This is particularly useful when stacking elements "on top" of one another.

Fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element is removed from the flow of the page and does not leave a gap in the page where it would normally have been located.

Sticky

An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

https://www.w3schools.com/css/css_positioning.asp

The Z-Index

Although we may think of webpages as flat, 2 dimensional spaces, they do have depth. The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

Layout and Setting Content Side-by-Side

Achieving the perfect layout with CSS can be achieved through several different methods. This week we will look at float, flex, and grid.

Float

The float property in CSS is used for positioning and layout on web pages. A common usage might be floating an image to one side and letting text wrap around it. To understand the purpose and origin of float, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements remain a part of the flow of the web page.

The tricky part about float is that content will continue to wrap around the element until the float has been cleared. This means you must apply the CSS property clear when you're ready to end the float.

https://www.w3schools.com/css/css_float.asp

Flex

The Flexible Box Layout Module, or Flex, makes it easier to design flexible responsive layout structure without using float or positioning. It also gives you great control over spacing, alignment, and wrapping.

Source: @codeByAshok

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Like Flex, it gives you great control over spacing, alignmen, and wrapping. What's the difference between Flex and Grid then? Where Flex works wonderful in one direction, the X OR Y axis, Grid gives control over both the X and Y axis for more complex layouts.

https://css-tricks.com/snippets/css/complete-guide-grid/

Want to master grid in a really fun way? Play Grid Garden! A game for learning CSS Grid.

Assignments