5/19/2020 Learn CSS: Display and Positioning Cheatsheet | Codecademy

Cheatsheets / Learn CSS

Display and Positioning

CSS z-index property
The CSS z-index property specifies how far
back or how far forward an element will appear on a //`element1` will overlap `element2`
web page when it overlaps other elements. .element1 {
The z-index property uses integer values, which position: absolute;
can be positive or negative values. The element with z-index: 1;
the highest z-index value will be at the }
foreground, while the element with the lowest z-
index value will be at the back. .element2 {
position: absolute;
z-index: -1;
}

Fixed CSS Positioning

Positioning in CSS provides designers and
developers options for positioning HTML elements navbar {
on a web page. The CSS position can be set to postion : fixed;
static , relative , absolute or }
fixed . When the CSS position has a value of
fixed , it is set/pinned to a specific spot on a
page. The fixed element stays the same regardless of
scrolling. The navigation bar is a great example of an
element that is often set to position:fixed; ,
enabling the user to scroll through the web page and
still access the navigation bar.

CSS display property

The CSS display property determines the type
of render block for an element. The most common .container1 {
values for this property are block , inline , display: block;
and inline-block .
}
Block-level elements take up the full width of their
container with line breaks before and after, and can .container2 {
have their height and width manually adjusted. display: inline;
Inline elements take up as little space as possible, }
flow horizontally, and cannot have their width or
height manually adjusted. .container3 {
Inline-block elements can appear next to each other, display: inline-block;
and can have their width and height manually
}
adjusted.

https://www.codecademy.com/learn/learn-css/modules/learn-css-display-positioning/cheatsheet 1/3
5/19/2020 Learn CSS: Display and Positioning Cheatsheet | Codecademy

CSS position: absolute

The value absolute for the CSS property
position enables an element to ignore sibling .element {
elements and instead be positioned relative to its position: absolute;
closest parent element that is positioned with }
relative or absolute . The absolute
value removes an element entirely from the
document flow. By using the positioning attributes
top , left , bottom and right , an
element can be positioned anywhere as expected.

CSS position: relative

The value relative of the CSS position
property enables an element to be positioned relative .element {
to where it would have originally been on a web position: relative;
page. The offset properties can be used to determine }
the actual position of the element relative to its
original position. Without the offset properties, this
declaration will have no effect on its positioning, it
will act as the default value static of the
position property.

CSS float property

The CSS float property determines how far left
or how far right an element should float within its /* The content will float to the left
parent element. The value left floats an element side of the container. */
to the left side of its container and the value .left {
right floats an element to the right side of its float: left;
container. For the property float , the width of
}
the container must be specified or the element will
assume the full width of its containing element. /* The content will float to the right
side of the container. */
.right {
float: right;
}

https://www.codecademy.com/learn/learn-css/modules/learn-css-display-positioning/cheatsheet 2/3
5/19/2020 Learn CSS: Display and Positioning Cheatsheet | Codecademy

The CSS clear property

The CSS clear property specifies how an
element should behave when it bumps into another /*This determines that no other
element within the same containing element.The elements within the same containing
clear is usually used in combination with element are allowed to float on the
elements having the CSS float property. This left side of this element.*/
determines on which sides floating elements are .element {
allowed to float. clear: left;
}

/*This determines that no other

elements within the same containing
element are allowed to float on the
right side of this element.*/
.element {
clear: right;
}

/*This determines that no elements

within the same containing element are
allowed to float on either side of this
element.*/
.element {
clear: both;
}

/*This determines that other elements

within the same containing element are
allowed to float on both side of this
element.*/
.element {
clear: none;
}

https://www.codecademy.com/learn/learn-css/modules/learn-css-display-positioning/cheatsheet 3/3