Example using Flexbox and CSS to design a blog header image and author’s profile photo.
In this lesson, I will show you how to use CSS to absolutely position an image. The example I will use is that of a blog header image with the author’s image positioned to the bottom left of the blog image. This is quite a common design to see on blog posts and it can be easily achieved.
THE FINISHED FLEXBOX AND CSS DESIGN
Above is a screenshot of the finished design. The author’s photo has been absolutely positioned against the blog image. A white border has also been placed around the author’s image to lift it from the background blog image.
THE HTML
The HTML structure is fairly straightforward and consists of nested div elements. The container div is not required although it has been included to demonstrate how the design might fit into a larger page design where container divs are typically used.
Line 14: this is the div that holds both the blog image and the author image. The position attribute of this div will be set to relative.
THE CSS
Again, relatively simple code is used:
Lines 1 - 4: these are not required if you are not using the container div element. The display is set to flex and then we set the content to center.
Lines 6 - 8: the blog-header div is set to relative positioning. All content within this div can then be set to absolute positioning.
Lines 12: note that the absolute position of the author’s image is set to -25px from the bottom. This ensures that the author’s image extends beyond the bottom of the blog image. The author’s image has dimensions of 100px by 100px. You may wish to adjust the position of your images according to your dimensions.
Line 14: a border radius of 53px is used. This gives the round image for the author. The full width of the image is 106px (100px image width + 3px border width on each side. Divide this by 2 to get the border radius).
This is a very simple example of what can be achieved using relative and absolute positioning of elements. I realise that Flexbox has only been used for the container div but, hopefully, you can see how this can be used in conjunction with absolute positioning.
