The float property and the position property can also be used to alter the default block flow of HTML elements. In this section, we shall discuss the float property, the clear property, z-index property, and the position property.
The Float Property
The original purpose of float is to allow images to float around text. Images can float either to the left or to the right. That is by wrapping text around images.
But we can use the float property to create multiple columns in a webpage. Note that elements can only be floated if they are not absolutely positioned.
In its simplest form, the float property has the following values:
- left, right, none and inherit.
The left value allows elements to be positioned to the left of its container. While the inherit value permits elements to use the float property of its parent.
Let us illustrate with this simple example:
Check the output before applying float property, then the output after applying the float property.
Let’s now apply the float property by simply adding the following CSS below:
#myfloatimg{
float: left
}[Result is shown in the second section of the above example.]
Check the output after applying the float property:
You can also change the float property value to the right, to let the image float to the right. While the text wraps around it.
Creating Columns and Boxes with the float property
You can use the float property to create columns and box layout in a webpage. Let us illustrate with the following example:
NB: When you use float to create boxes, you will have unequal boxes. This can be controlled by specifying the height property for your boxes.
The clear property
When an element has the float property, the element following it will be stacked around it. To stop subsequent element from floating, we use the clear property.
The clear property has the following values: left, right, both, none and inherit.
Let us illustrate with this example:
The Position Property
Another way to alter the normal flow of the HTML elements is by using the position property. In this section, we’ll be discussing the position property.
The position property is used to specifically place an element in a given location within a site layout. We have earlier discussed that element in an HTML document flow in a block form.
Subsequent block elements follow the previous ones in a normal layout flow. But using the position property, we can alter this flow by specifying where a particular element will be placed in the webpage layout.
The position property has the following values: static, relative, absolute, fixed, and sticky.
Before looking at the values, let us first look at how an element is placed in a webpage in the x and y-coordinate.
Positioning an element
In a page layout, an element can be positioned in relation to the four margins of the page. They include the top, right, bottom and left of a page.
Hence, while positioning an element, we may use the top, right, bottom and left properties to define the actual location on-page. These properties are associated with the position property, without which they will not work.
These properties can take on values of any unit of length, say, px, cm, mm, in, etc. e.g. top: 200px; left: 150px;
The top property moves the element down from the top based on the value specified.
E.g. top: 20px will move the specified element 20pixel down from its present location.
Similarly, the bottom property will push the element up from its present location to the tune of the specified length.
The left property will move the specified element from left to the right.
And, the right property will move the specified element from right to the left in the tune of the specified length value.
In this case, the value of top: 0; left: 0; means top left position of the page.
Example
The z-index Property
Haven discussed the top, right, bottom and left properties, it will be worth mentioning the z-index property.
The z-index property affects the stacking of positioned elements on top of each other. We use the z-index property to specify which element should appear on top of the other when more than one element is stacked together.
The z-index property takes on unitless value such that the element with a higher value will be on top of the element with a lower value. The default value is auto which is the same as 0.
Example
Consider the following HTML and CSS example.
The output shows that each <p> element is stacked on top of each other in their order in the source code as shown below.
We can change this order by applying the z-index property to the first paragraph with the id=“fir”.
NB: id was changed to firz for purpose of uniqueness.
This is shown in the second <section> of the example below:
Notice the z-index in the #firz. The z-index will bring forward or take backward a particular element in the z-coordinate.
Specifying the Position Property values
As noted above, the position property has 5 values: static, relative, absolute, fixed and sticky. Let us look at each of these values and how they affect your elements.
position: static
One of the values a positioned element can take is static and this is the default value of every element in the HTML document.
Elements with their position value set as static simply mean that the element will follow the normal document flow.
There is no difference between such elements and elements in the normal flow. Here, the top, right, bottom and left properties are of no effect.
Example
In our HTML above, we changed the position value in the CSS to static. The result will be as follow:
position: relative
Elements which their position value is set to relative will behave like elements which their position value is set to static.
This means that they will follow the default flow of elements in the HTML document, but with an exception. The exception is that the top, right, bottom and left properties work with this position value.
Hence, when an element is relatively positioned, you can alter its position with the top, right, bottom and left properties. Other elements within the document flow are not affected.
Example
In our HTML above, change the position value in the CSS to relative. The output will now look like this:
position: absolute
When an element’s position property value is set to absolute, that element is usually located at the top: 0; left: 0; in relation to its nearest positioned parent, if and only if this parent’s position is not static.
If the parent’s position is static, then the element will be positioned in relation to the browser window.
Absolutely positioned element is completely removed from the document flow, and subsequent elements would close up the gap left by such element.
The top, right, bottom and left properties work fine here; also, absolutely positioned elements scroll with the page.
Let us illustrate:
The first paragraph element is completely taken off the normal document flow as shown below:
position: fixed
An element with this type of position behaves like an absolutely positioned element with few exceptions.
- The position is relative to the browser’s viewport rather than parent’s element
- It does not scroll with the page. When pages are scrolled it remains at a fixed position.
Example:
Output: try and scroll, you’ll notice that the fixed <nav> does not scroll with the page.
position: sticky
This type of positioned element is a hybrid of fixed and relative positioning. This is because it acts like a relative positioned element until the page is scrolled to some extent. When the element with a sticky position value reaches the top scrolled page, it acts like a fixed positioned element.
Example:
The output should look like this. Scroll to test the result. This is where we will end today’s post. Next week, we shall look at the flexbox layout.
