WDD 130: Web Fundamentals

CSS Layout: Position

Overview

Elements are positioned on a document using the normal flow by default. Sometimes, the layout calls for placing items by absolute or fixed positions. Because this can lead to unintended outcomes, using absolute or fixed positions should be done sparingly and only for specific areas and not the entire document.

"The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements." - MDN

Here is an example of using the position property and having text, "New Here?" and "Learn What We Believe" overlaying an image in the same HTML container:

Screenshot Example of Text Overlaying an Image in the Same Container
Figure 1: Example of text overlaying an image in the same container

Prepare

Images and position/sizing

Working with images can be challenging because they have a set width and height that must be otherwise the image will appear pixelated and/or distorted. Normally, a general rule of thumb is to set only the width or the height, not both in CSS in order to maintain the image's aspect ratio. If the image containers are set, then setting the width to 100% is a common practice to ensure the image fills the container.

It is recommended that you start with the following CSS declaration for all of your work in this class to help control the aspect ratio of images.

img {
  width: 100%;
  height: auto;
}

The CSS above sets all image widths in the document to 100% of the width of their containers and the height to auto, thus maintaining the image's intrinsic aspect ratio.

The aspect ratio, which is the width by height measurement, is often shown as 2:1 where the width is twice the height.
In the example image from the Church's website above, the intrinsic dimensions of the image may not fit the actual container dimensions by just using an auto height. In a case like this, the object-fit property can be used to set the image to fill the container. Here is an example of the CSS rule: 
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Activity Instructions

File Setup

  1. Create a folder named "week03" in your wdd130 directory.
  2. Create a folder named "styles" within the week03 folder.
  3. Create a file named "overlay.html" in the week03 folder.
  4. Add a CSS file named "overlay.css"" in the week03/styles folder.

HTML

  1. Give the overlay.html document a basic and valid HTML structure.
  2. Be sure to link the CSS file in your HTML document head.
  3. Copy the HTML from this CodePen: CSS position: absolute - overlay and paste it into the overlay.html document's body.

CSS

  1. Copy the CSS from the same CodePen into overlay.css file.
  2. Move the section class="stats" display box from the upper right to the lower left of the image.
    Check Your Understanding 
      ...
  bottom: 25px;
  left: 15px;
  ...
  3. Remove the position: relative; property from the container div (this div has a class of herodiv assigned to it).
    What happens?
    Answer

    The information section overlay moves to the bottom left of the document instead of the bottom left of the div.herodiv container. This happens because, with the position property, the absolute positioned item is positioned relative to its ancestors that have a declared, position property. Since none have that property now, it moves to the overall document position instead of the <div class="herodiv"> container.

  4. Also note the footer using a position: fixed declaration.

Submission

  1. Test your page in your local browser using Live Server.
  2. Commit and push your work to your wdd130 GitHub Pages enabled repository. 
    https://githubusername.github.io/wdd130/week03/overlay.html
  3. Share and discuss your work with your peers on Microsoft Teams.

Optional Resources