In Lorelle’s WordPress School free online course we’ve been exploring HTML and CSS basics to help you prepare for working with WordPress Themes coming soon. The information in these tutorials is essential for the WordPress user to learn for the most simple of tasks, from controlling how content displays in your posts to adding HTML code to WordPress Widgets to tweaking your WordPress Theme, and someday maybe even making your own or at least creating a Child Theme, a design that modifies an existing WordPress Theme.
This tutorial explores CSS positioning, how to put things in their place on a web page, following up on the previous tutorial on the CSS Parent-Child Relationship.
There are many ways to position design elements on a web page. In the previous exercises, we moved the paragraph “down” within its container by adding padding to the inside “space” of the
div. Margins and padding move things around and position them within the CSS Box Model, but you have other alternatives for more specific positioning.
Here is our test code for this tutorial:
<div class="position1"> <p>Hello world!</p> </div>
Below is the CSS to add to the
head in the styles. In this example, the position of the wrapping DIV around the paragraph is set to absolute 100 pixels from the top left corner down and 80 pixels in from the left edge of the parent container edge.