How To Use CSS Positioning In Your Posts

CSS allows you to position elements using the property 'position'. This property can take various values but, today, we will only introduce absolute positioning. In addition to'position', CSS uses 4 more properties to place the element: top, bottom, left and right.

'Absolute' Positioning:

The element is placed according to the position of its ancestor (Actually the first ancestor that does not have already an absolute positioning ! ). In the following example:

CSS:
#mydiv1 {position : relative;}#mydiv2 {position : absolute;top: 10px; left: 10px;}

HTML:<div id="mydiv1"><div id="mydiv2">...</div></div>

The element 'mydiv2' will be positioned 10px from the top of the element 'mydiv1' and 10px from the left side of the same element. 'mydiv1' is the first ancestor of 'mydiv2' that does not have an absolute positioning.

An Example : Adding A Text To An Image
Here is an image of a nice beach in Florida:

Adding this image to the post I am drafting triggers the production of the following HTML code :

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5BiU0ZbwboULeb7j-_lLWWUTg2EDjEuuNrcVj7joScjR2_7xks4cTgVac3-QDWafFJ4LZiF-NnMU2B5lhTX8tt4HEz4DnJoxkcZWCkHjMMMuYpbtglSDz6Y4t34oHv6fftOW1DapEr40/s1600/sea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5BiU0ZbwboULeb7j-_lLWWUTg2EDjEuuNrcVj7joScjR2_7xks4cTgVac3-QDWafFJ4LZiF-NnMU2B5lhTX8tt4HEz4DnJoxkcZWCkHjMMMuYpbtglSDz6Y4t34oHv6fftOW1DapEr40/s1600/sea.jpg" /></a></div>

The text we want to add over the picture is the following:

I love Florida

Here is the HTML code that is required to create this short text:

<div style="color: deeppink; font-size: 24px; font-weight: bold; text-align: center; text-shadow: 2px 2px #FFC0CB;">I love Florida</div>

How Do I Place The Text Over The Picture?

1) Insert the image where you want it to be in your post.

2) Open the html view and position your mouse just after the following tag:

<div class="separator" style="clear: both; text-align: center;">

that has been added by blogger.com before the image:

3) Add the following tags:

</div><div style="margin: auto; position: relative; width: 400px;">

Note that the width (400px in the example) must be replaced with the actual width in pixels of your image.

4) Add your text just before the </div> closing tag that was created by the insertion of the image. The added text must be surrounded by a <div> opening tag and a </div> closing tag as follows:

<div style="color: deeppink; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">I love Florida</div>

Note that:

position: absolute property has been added to the style
the actual position is defined by left : 130px (130px from the left side of the picture) and top: 110px (110 pixels from the top of the picture). These properties have also been added to the style of the text. You have to replace the values 130px / 110px by the actual position yiu want to give to your text.

Here is the result:

I love Florida

Here is the full code (image + text) :

<div class="separator" style="clear: both; text-align: center;"></div><div style="margin: auto; position: relative; width: 400px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5BiU0ZbwboULeb7j-_lLWWUTg2EDjEuuNrcVj7joScjR2_7xks4cTgVac3-QDWafFJ4LZiF-NnMU2B5lhTX8tt4HEz4DnJoxkcZWCkHjMMMuYpbtglSDz6Y4t34oHv6fftOW1DapEr40/s1600/sea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5BiU0ZbwboULeb7j-_lLWWUTg2EDjEuuNrcVj7joScjR2_7xks4cTgVac3-QDWafFJ4LZiF-NnMU2B5lhTX8tt4HEz4DnJoxkcZWCkHjMMMuYpbtglSDz6Y4t34oHv6fftOW1DapEr40/s1600/sea.jpg" /></a>


<!-- Text over the image -->

<br />
<div style="color: deeppink; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">I love Florida</div></div>

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.