One powerful feature of CSS is the ability to position content in a variety of ways without having to write much HTML markup. There are a few different types of positioning within CSS, some of which have multiple uses and applications. When it comes to page layouts, CSS has become king, so what can be taken advantage of to create user-friendly flows?
- Use
floatto pull content left or right - Create
clearfixto clear floated content - Use
positionto give fixed properties to elements - Use
z-indexto change the depth of elements - Use
margin: autoto center block elements
One way to position elements on a page is with the float property. The float property
removes it from the normal flow of a page and positions it to the left or right of its
parent element. All other elements on the page will then "wrap" around the floated element.
The two most popular values for float are left and right, which allow elements to be
floated to the left or right inside of their parent element. Anytime you float an element,
elements that come after are going to try to fill in the available whitespace next to the floating
elements. If there's room for a container to fit next to some floated content, and that is
not the intended effect, you can use the clear property and set it to clear, or reset from,
the element floated left, right, or elements floating with either using both. An example of
using float for layout structure can be seen in the snippet below:
In this scenario, we want the footer to cleanly display below all the columns. In order to get the
footer to clear past the height of any floating content we can use the clear property. Using
clear: both for footer forces it to clear past the height of anything that's floating left and right,
and stay at the bottom of the columns, right where we want it.
In the next example, you can see float being utilized to wrap text around an image.
The image is given a display property of block (or inline-block) so that it can take
block properties such as margin to give it spacing. When the class .fall-below is removed,
the block of text continues to wrap around the image until there is a line-break in the text
that allows it to flow around.
When float is used with elements, there can be some unintended results. As elements are floated,
it is important to notice how they affect the flow of a page and reset floats as necessary. Not
doing so can cause some headaches when dealing with structuring elements. To deal with these issues
the technique of using a clearfix can come in.
In the above code snippet, if you remove the clearfix class from the containers, you can see that
the floated content is now falling outside of the parent element, because the parent element loses
reference to its child elements as the parent element is not floating and its children have broken
out of the page flow.
The special clearfix class is a CSS "hack" that will allow the parent elements to be aware of its
children's height, even when they break the page flow. Sometimes the clearfix is referred to as
group to be more semantic to developers. There are a couple of different ways this hack can be
written. Both styles below provide the same outcome:
/*
========================================
Clearfix
========================================
*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
/*
========================================
Group
========================================
*/
.group:after {
content: "";
display: table;
clear: both;
}
As CSS3 techniques become more widely adopted, hacks such as the clearfix may soon become obsolete. A new value of the display property has been launched.
.group {
display: flow-root;
}
Using display: flow-root on an block element will perform the clearfix for us. Instead of needing
to apply the clearfix hack, we can use the display property on the container with a value of
flow-root.
NOTE: There may still be unintended results with this new property that could potentially
impact other properties like z-index, so use with caution!
Positioning allows you to place elements outside of the normal document flow. The position
property can allow a UI element to float over the top of other parts of the page, or always
sits in the same place inside of, or offset from the parent, regardless of the placement of
other elements.
The relative value for the position property allows elements to appear within the normal
flow of a page. It gives us the ability to offset an element from the top, right, bottom,
or left that direction the number of units that is set without changing the positioning of the
elements around it.
If we set position to absolute it also gives us the same ability, however the values that
are applied for these properties will move the element within the relatively positioned parent,
or within the entire browser window, instead of the element only moving relative to where it
was in the DOM. The element will not appear within the normal flow of a document, and the
original space and position of the absolutely positioned element will not be preserved. A common
example of absolutely positioned elements in common UI are "close" buttons in a window. They are
typically docked to the top-right of a container (sometimes the top-left).
An element with position set to fixed shares all the rules of an absolutely positioned element,
except that the browser window positions the fixed element, as opposed to any parent element.
Additionally, a fixed element does not scroll with the document. It remains fixed within the window.
Commonly used fixed UI elements can be modal windows,
or floating menus.
NOTE: The value of sticky can also be used specifically for "sticky" elements like menus, but browser
support is limited.
While positioning elements can allow for a lot of control in layout, be mindful that it is not a method you would use for entire layouts. However, there are many tasks it is suited for that enhances layout and functionality.
Positioning and z-index often go hand-in-hand. Have you ever noticed UI elements that overlap part of
the page, such as a drop down menu, tooltip, or a popover? When you click on a photo, a modal may pop
up with an enlarged version of it. These are a couple of common examples where you want to control the
placement of each layer on the page. This can be achieved using a property called z-index.
The z-index property controls the stacking order of elements that overlap. A higher value means the
element will be closer to the top of the stacking order. z-index only effects
elements that have a position value other than static, the default. When the z-index property isn't
involved, the stacking order is prioritized by the following:
- The (root) element, background and borders of the element that establish stacking context
- Elements with negative stacking contexts, in order of appearance
- Non-positioned, non-floated, block-level elements, in order of appearance
- Non-positioned, floated elements, in order of appearance
- Inline elements, in order of appearance
- Positioned elements, in order of appearance
Observe the example below to see how elements are affected when positioning and z-index are applied:
Try changing the z-index property of individual elements to stack them in a different order. By
default, the top-most element would be the blue square, with the id of c, but the red square with
the id of a appears closest to you on the screen, since it has a higher z-index value.
In constructing a layout and various layout elements, centering in the "unknown"
will be needed often to align elements in the center of a page without giving fixed
values that may not work for various screen sizes. With margin: 0 auto; it is possible!
In the example above, we've wrapped all of the content inside of one element, which is
the div with the class of wrapper. By setting the width of this wrapper element, it
will prevent it from stretching to the full width of a screen. Its margin is set to 0 auto. The first value
is 0 meaning zero margin on the top and bottom, and the second value auto means
it will automatically calculate the left and right margin. If you drag the results
window larger or smaller, it will adjust the margin accordingly.
The only issue with this is when the element is wider than the browser window. We will discuss later how to to adjust for this limitation.
CSS enables us to choose from many options with positioning elements. Over the past
couple of years alone, CSS has dramatically changed as well as the way we develop
website front end. We need to understand the fundamentals in order to best make
a decision as to how to leverage these properties. With float, clear, position,
z-index, and margin, we're able to take control of CSS layouts and content
design--whether it's for alignment, spacing, and/or other design choices.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent