Now we’re starting to get into the heart and soul of CSS, which would be positioning, or how a box relates to the rest of the page and elements. Over the next three tutorials I’m going to be talking about the different position types, but this one is going to be about relative positioning. This kind of positioning follows the normal flow rules, the only difference is that the box can be moved according to its offset properites.
When you create a document using CSS that has more than one container box, there is a default flow to how everything is positioned, assuming that box isn’t an absolute or fixed box, nor a float—and don’t worry, we’ll touch on those terms later.
There are two types of boxes, block and inline. Block boxes would include elements such as <p> or <div>, while inline boxes would include tags such as <strong> or <span>, as well as content like text and images.
A block box acts like a container. The point of these container boxes is to determine the position of the boxes within it, and sometimes the dimensions of these boxes. Take the following code for example:
According to its creators, cascading style sheets “is a simple mechanism for adding style to web documents.” The goal of this and future tutorials is to apply the power of CSS to help you understand CSS. So what exactly is CSS anyways?