What is this lesson about?

In this lesson we will arrange the content we created/learned about. They will be positioned relative the page or/and relative to each other.

With the <div> tag we can wrap multiple HTML tags and we can position them together. We can align content horizontally and vertically, moreover we can position it in front of/behind another element. Although <div>-s are not the only elements, that can have background image, we will set background image for the first time in this lesson.

<div></div> - we can place a section of the webpage’s content in this tag. Using this tag we can position and align contents more easily. Another advantage of <div>-s is, that we can apply separate design settings to a section delimited by it.

position – with this property we can set the position of an element on the website. This property can have the following values: static, relative, absolute, fixed, sticky.
top, bottom, left, right – with these keywords we can define the exact position of a positioned  element (all, except static).
z-index – with this property we can set the covering order of the elements positioned over each other. Can be used only with the element being positioned absolute, relative or fixed.
background-image – every HTML element can have a background image. To define the image we need its name and path. The value written in the CSS file has the form: url(path/imagename.extension);

• static: this is the default positioning value of the elements on a website. The elements with this positioning are not positioned in any way, they appear according to the flow of the page.
• relative: the element is positioned relative to its normal position.
• absolute: the element is positioned relative to the nearest parent with a declared position (except static). If no parents are positioned in any way, then it’s relative to the document body.  
• fixed: the element is positioned relative to the browser window and it stays in place even on page scroll.
• sticky: the element is positioned relative to the scroll position.

Example on sections wrapped in <div>:

The webpage above contains two sections. Both have identifiers (links and back), so we can apply different design to them.

In the links section, thanks to the background colors settings, we can see that the section stretches all the way from left to right in the browser window. The background color for the links is used only for the texts.

We used a background image for the second section. The image is smaller than the section, and there is no setting related to that, so the image will be repeated. The image selected can be repeated, without being visible that it is not one big image (it is called wallpaper). 

The width is not set, the section occupies the whole window from left to right. The height would be adjusted to the content: the word Pattern. That way, there is an 80% height set: this means the 80% of the height of the window.

Both sections contain links, but because the reference to the <a> tag is preceded by the id of the section we can format them differently, without having to use classes.

• In the newest standard for HTML, there are separate tags for <div> sections used as header or footer, named <header> and <footer>. There is a <nav> tag to mark navigation sections. These tags are useful for the automatized interpretation (by programs) of websites. 
• Be careful when using background images. The texts will be harder to read, and it is harder to create/find matching background images for different sections, than colors.
• If we use both color and image as background, the image will be shown. If the image cannot be found or does not fill the whole section, the background color appears.
• If the background image is smaller than the area to be filled, the image is repeated. If it is bigger, then it will be shown only partially. To change this you may want to read about the background-repeat and the background-size properties.
  
  Example on fixed positioning:

On the pictures above the positioning of the box1 and box2 sections is the default, static, but the box3 section is fixed. The text Fixed and the box which contains it, will be always in the right top corner of the browser: exactly 30 pixels away from the right and from the top edge of the window. This position does not depend from the size of the window.

The third sections width does not reach through the whole window, its size adjusts to the content.

Example on absolute and relative positioning:

In this example the top and bottom sections (box1 and box3) are static, we use them as referral points, to see how the others are positioned related to their default position.

The section with the green background is positioned relative, transferred with 20 pixels upwards and 100 pixels from left. We can see that the box above it is not disturbed by this shift.

The smaller boxes (box4) position is absolute. It is originally in the green box, but setting the positioning to absolute, we define its location related to the box2: it is 10 pixels up and 100 pixels to the left.

The width of the box2 section stretches to the right edge of the window, the width of the box4 section is adjusted to its content.

The original place of the elements set to relative position is left blank: see the white space between the two static sections.

• If the position is set to relative, the section can be aligned to center by adding the value auto to the margin property. You may need this setting if the section’s width is not 100%.
• An element with sticky positioning is always visible in the window, “resisting” scrolling: it is positioned relatively until reaches a marked point trough scrolling, after that the positioning gets fixed. We need to define this position: for example top: 0; means that it will stick at the top of the browser window.
  

In the example above we can apply the z-index property to the three boxes, because their position is fixed and they overlap. The z-index values here are 0, 1, 2, but can be negative too. We can move elements under not positioned elements.