Sometimes you need to place an element in an exact spot inside of another element. CSS gives you a way to do this using absolute positioning.

You will use absolute positioning to place the detail-image-title in the lower left corner of the .detail-image-frame, as shown in Figure 4.21.

Figure 4.21  Absolutely positioned .detail-image-title

There are three requirements for absolute positioning. The absolutely positioned element must have:

A word of warning: It might be tempting to use position: absolute for everything, but it should be used sparingly. A whole layout with absolute positioning is nearly impossible to maintain and will look terrible on any screen size other than the one it was developed for.

When specifying a coordinate, you are really specifying the distance from the edge of the element to the edge of its container, as shown in Figure 4.22.

Figure 4.22  Elements are absolutely positioned based on their edges

Figure 4.22 has two examples of absolute positioning. In the first one, the element is positioned so that its top edge is 50px from its container’s top edge and its left edge is 200px from its container’s left edge. The second example shows a variation, where the element is positioned by its bottom and left edges.

To position the .detail-image-title, start by declaring the .detail-image-frame to have position: relative in styles.css. You will position the .detail-image-title relative to it.

...
.detail-image-frame {
  position: relative;
  text-align: center;
}
...

You used position: relative for .detail-image-frame because you want it to remain in normal flow. You also want it to serve as the container for an absolutely positioned descendant, so its position property must be explicitly defined.

At the end of styles.css, add a declaration block for the .detail-image-title selector. For now, make the title white and set the font size to be four times the default.

...
.detail-image {
  width: 90%;
}

.detail-image-title {
  color: white;
  font-size: 40px;
}

So far, so good (Figure 4.23). But so basic.

Figure 4.23  Basic text styling for .detail-image-title

For a touch of style, let’s add some text effects to the .detail-image-title. When positioning styled text elements, bear in mind that the element’s box may change due to the visual characteristics of a custom typeface or other effects. For this example, you will do all of the text styling for .detail-image-title before you set its position. Add a text-shadow property to .detail-image-title in styles.css.

...
.detail-image-title {
  color: white;
  text-shadow: rgba(0, 0, 0, 0.9) 1px 2px 9px;
  font-size: 40px;
}

As the name suggests, the text-shadow property adds a shadow to text. It accepts a color for the shadow, a pair of lengths for the offset (i.e., whether the shadow falls above or below and to the left or right of the text), and a length for the blur radius – an optional part of a text-shadow declaration that makes the shadow larger and lighter in color as you make the value higher.

You gave your shadow the color attribute rgba(0, 0, 0, 0.9) to make it a slightly transparent black. It is offset, or shifted, 1px to the right and 2px below the text (negative values would place it to the left or above the text). The last value of 9px is the blur radius. Figure 4.24 shows your new shadow.

Figure 4.24  A text-shadow for the .detail-image-title

Try adjusting the text-shadow values in the styles pane of the DevTool’s elements panel to get a feel for how they work (Figure 4.25).

Figure 4.25  Exaggerating the text shadow using the DevTools

When you are ready, add one last flourish with a custom font. As you did in Chapter 3, add an @font-face declaration in styles.css to add the Airstream font to your project. Add a font-family: airstreamregular declaration to .detail-image-title to put it to use.

@font-face {
    font-family: 'airstreamregular';
    src: url('fonts/Airstream-webfont.eot');
    src: url('fonts/Airstream-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Airstream-webfont.woff') format('woff'),
         url('fonts/Airstream-webfont.ttf') format('truetype'),
         url('fonts/Airstream-webfont.svg#airstreamregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lakeshore';
    ...
}

...

.detail-image-title {
  font-family: airstreamregular;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.9) 1px 2px 9px;
  font-size: 40px;
}

So far, so stylish (Figure 4.26)!

Figure 4.26  I gotta have more fancy

Now that you have finished the styling of .detail-image-title, give it a position: absolute declaration so that the browser will place it at a precise location within .detail-image-frame. Specify that location with bottom: -16px and left: 4px, to put it just below the bottom edge of .detail-image-frame and a little bit inside the left edge of .detail-image-frame. (Negative values are fine for the coordinates.)

...
.detail-image-title {
  position: absolute;
  bottom: -16px;
  left: 4px;

  font-family: airstreamregular;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.9) 1px 2px 9px;
  font-size: 40px;
}

Save styles.css, and you will see in the browser that the .detail-image-title now sits below and near the left of the otter photo. You now have a positively chic Ottergram in your browser (Figure 4.27).

Figure 4.27  Hello, gorgeous!

Take a step back to enjoy the fruits of your labor. Ottergram has a dynamic, fluid layout thanks to the addition of flexbox to your styles. In the next chapter you will make the layout adapt to different browser window sizes.