Codecademy - CSS 5: Display and Positioning

What i've learnt from the display and positioning lesson of Codecademy's CSS course.

• For a site with no CSS, the browser will just render elements from left to right and top to bottom. Using CSS, you can position elements where you'd like them.

Position Property

• To start with, we can do this with the properties position, display, z-index, float and clear.
• You can change an elements position by changing its position property. In the example we're shown block level elements (boxes) that create a box the full width of it parent element and they stop any other element being in is horizontal space (nothing can be next to it)
• There are four possible values for the position property. These are:
  • static (this is the default value and just means it'll be on the left, so it doesn't actually need to be specified)
  • relative
  • absolute
  • fixed

Relative

.question {
  text-align: center;
  position: relative;
  top: 40px;
}

• If you choose the relative value for the position property, it means you can then specify, the top, bottom, left or right movements of that element from where it would normally be if it was static.
• Important to remember:
  • top - moves the element down.
  • bottom - moves the element up.
  • left - moves the element right.
  • right - moves the element left.

Absolute

• When an element’s position is set to absolute all other elements on the page will ignore it and act like it is not there. The element will be positioned relative to its closest positioned parent element.

Fixed

• When you set an element's position to fixed it means that wherever you set it on the page, it will not move when the user scrolls. This is often used for navbars.

Z-Index

• You can use the z-index property to basically state which element will be on top of another (overlap)
• Z-index does not work on static elements, so you'd need to set the position to relative (or absolute or fixed?)
• The greater the integer you set the z-index as, the further forward it will be. So an element with a z-index of 2 would overlap an element whose z-index was 1.

.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 1;
}

Display Property

• HTML elements historically were categorized as either "block-level" elements or "inline" elements. Inline elements are those which only occupy the space bounded by the tags defining the element (so they don't take up a whole line).
• The Mozilla Inline elements page explains this well.

• The default display for some elements is inline because they take up so little space and they can share a line with others eg. the a tag doesn't need a whole line of its own.

• There are three values for the display property:

  • inline (elements do not take up a whole line, they render within a line with other elements, e.g. an a tag link.)
  • block (elements take up a whole horizontal line, e.g. a p tag) List of block elements
  • inline-block (Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the width and height properties.)

.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
}

• The inline block display was used in an example to put navbar elements next to each other rather than one on top of the other.

Float

• Float allows you to simply move an element as far left or as far right as it can go.
• This works for static and relative positioned elements.
• Floated elements must have a width specified otherwise, it will assume the full width of its containing element, and so changing the float value will not seem to change much.

.box-bottom {
  background-color: DeepSkyBlue;
  float: right;
}

Clear

• Sometimes using the Float property can mean that other elements bump into each other and they look strange!
• You can use clear to specify how elements should behave when they bump into each other.
• The clear property can take on the following values:
  • left — the left side of the element will not touch any other element within the same containing element.
  • right — the right side of the element will not touch any other element within the same containing element.
  • both — neither side of the element will touch any other element within the same containing element.
  • none — the element can touch either side.

div {
  width: 200px;
  float: left;
}

div.special {
  clear: left;
}

That's all for display and positioning! So glad to finally understand how to move elements around on a page...have actually been wondering about that for a while!