Positioning Elements

At the end of this Tutorial, you will be able to:

• Accurately position and overlap text and image elements on a web page.

The static position property

This is the default value of the position property. This means that if you don't set any position value for an element, its position value will be static.

Note the following:

• Because it is the default position property, a static element is not considered ‘positioned’.
• An element is considered ‘positioned’ only if it has any value other than static.

Elements with static positioning display directly below one another, according to their order in the HMTL code. This is called normal document flow.

See the sample positioning-exercise-1.html source code and web page.

The relative position property

If you change the position property of an element to relative, it will appear in the web page exactly as it would with the default relative positioning.

However, there is one major difference.

Elements with a relative value accepts the so-called box offset properties – top, right, bottom, and left.

These properties enable the element to be moved (offset/pushed/pulled/nudged) in any direction from its normal position.

Open the following web page and stylesheet.

• positioning-exercise-1.html
• positioning-style-1.css

For example if set you an element to left: 20px, the element will be placed 20 pixels to the right of where it normally would be. If you set the value to -20px, it would push the content to the left with 20px.

Apply some box-offset properties to the four div elements in the sample positioning-style-1.css stylesheet.

Typically, you use relative positioning for one or both of two reasons:

• To change the location of that element.
• Apply it to a parent/container element to gain control over a child element inside it that has an absolute position.

The absolute position property

Just like an element with relative positioning, an element with an absolute position value accepts the usual box offset properties – top, right, bottom, and left.

However, an absolutely positioned element is displayed:

• Relative to the web browser window/viewport – that is, in relation to the body of the HTML file.   -or-
• If it is a child element, relative to its parent container if that parent has a position other than the default of static.

Absolutely positioned elements are said to be removed from the normal flow of the web page. That is, they can be displayed anywhere in the browser window regardless of where they are located in the HTML file.

Setting an element as absolutely positioned element without any box-offset values will position the top left of the browser window or parent container.

Note the following about an element with absolute positioning:

• If the element doesn't have a set width, and its left and right box-offset values are both set to zero, then the element fills the full width of the web browser window.
• If the element doesn't have a set height, and its top and bottom box-offset values are both set to zero, then the element fills the the full height of web browser window.
• If the element doesn't have a set width or height, and all four of its box-offset values are set to zero, then the element fills the full size of web browser window.

Add the following HTML and CSS to your sample files.

Overlapping elements and the z-index property

When you position elements (that is, apply a position property other than static to them), you will find that the elements often overlap. In other words, some elements will display in front of others.

• Positioned elements will appear in front of non-positioned elements
• If both elements are positioned, ones that are lower in the HTML file will appear in front of others.

The z-index CSS property sets the overlapping order of positioned elements. Elements with a larger z-index value display in front of those with a smaller one.

Apply some z-index values the div elements in the first sample web page and stylesheet.

You can close these files when finished.

Absolute positioning inside relative positioning

A parent element with relative positioning enables you to control an absolutely positioned child element inside it.

Open the following web page and stylesheet.

• positioning-exercise-2.html
• positioning-style-2.css

The web page should display as follows:

Update the CSS file as shown below, and save and redisplay the web page.

Next:

• To the hero-block outer parent div element, apply relative positioning.
• To the container-text child div element, apply absolute positioning.

Save and reload the web page. It displays exactly as before.

Now:

• In the HTML file, make four copies of the container-text child div element.
• Apply the five box-offset classes from the linked stylesheet to these five div elements.

Save and reload the web page. It now look as shown below.

Overlapping text on images

Image overlay is the technique of adding text or other elements over an image. CSS offers a number of ways to achieve this effect:

• Applying a background-image property to the container div element.
• Adding a separate child div element to contain the text and giving that child div an absolute position.

We will use the second method.

Open the following web page and stylesheet.

• positioning-exercise-3.html
• positioning-style-3.css

You can see a parent container with relative positioning that has inside an image with absolute positioning.

To show the effect of styling the image in the hero-block container, the same image is also embedded outside the hero-block.

In the web browser resets of a CSS file, the img element is typically given the properties and values below.

To display the image at its actual size, the positioning-style-3.css stylesheet sets both the width and height of the image to auto.

In the CSS file, update the .hero-block img class as follows.

The image now fills the parent hero-block. Unfortunately, the image is now distorted.

To fix this, add the object-fit property as shown below.

The image is no longer distorted and there is no empty space displayed in the outer container hero-block.

However, because the image has a different shape you can no longer see the full image. This is called the 'letter-box' effect.

You can control which part of the image is visible with the object-position property. See some possible values below.

Apply some of these values and notice the effect on the image inside the hero-block parent container.

When finished, set the object-position property to center center.

Responsive design and the object-position property

In the sample web page, delete the image outside the hero-block container.

Inside the hero-block container, replace the current image as shown below.

On desktop/laptop screens, the web page now looks as follows.

However, on mobile phones, the focal point (main area of visual interest) is barely visible.

To correct this, add a media query as shown below.

Your web page should now display as shown below.

Finally, add the following to the HTML and CSS files.