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 web page //èlement1` will overlap èlement2`
when it overlaps other elements. .element1 {
The z-index property uses integer values, which can position: absolute;
be positive or negative values. The element with the z-index: 1;
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 on a web page. navbar {
The CSS position can be set to static , postion : fixed;
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 values .container1 {
for this property are block , inline , and display: block;
inline-block . }
Block-level elements take up the full width of their
container with line breaks before and after, and can have .container2 {
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, and display: inline-block;
can have their width and height manually adjusted.
}
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 closest position: absolute;
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 to .element {
where it would have originally been on a web page. The position: relative;
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 parent /* The content will float to the left side
element. The value left floats an element to the left of the container. */
side of its container and the value right floats an
.left {
element to the right side of its container. For the
float: left;
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;
}
The CSS clear property
The CSS clear property specifies how an element
should behave when it bumps into another element /*This determines that no other elements
within the same containing element.The clear is within the same containing element are
usually used in combination with elements having the allowed to float on the left side of this
CSS float property. This determines on which sides element.*/
floating elements are allowed to float. .element {
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;
}

Learn CSS - Display and Positioning Cheatsheet - Codecademy

Uploaded by

Copyright:

Available Formats

Learn CSS - Display and Positioning Cheatsheet - Codecademy

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learn CSS - Display and Positioning Cheatsheet - Codecademy

Uploaded by

Copyright:

Available Formats

Cheatsheets / Learn CSS

Display and Positioning

Fixed CSS Positioning

CSS display property

absolute . The absolute value removes an

CSS position: relative

CSS float property

/*This determines that no other elements

/*This determines that no elements within

/*This determines that other elements

You might also like