In web design, where you put content is just as important as how you place it. Positioning can affect various aspects of the user experience. In this short guide, you will learn about the CSS position property and how it works with elements on an HTML page.
If you are jumping into this with little knowledge of HTML or CSS, it would be a great opportunity for you to read up on the basics of both. The posts HTML for Dummies and CSS Basics for Beginners can give you a quick overview of the ground floor ideas for each topic. If you are good to go, then dive into the content below.
What does the CSS Position Property Do?
The CSS position property helps you define the position you want an element to take on the HTML page. The CSS position property has six values you can assign to it to determine that defined location. Understanding the difference between these values allows you to know where and when to use them. The values are shown below. Examples for each will follow as well to help make sense of these options.
CSS Position: Static Value
This is the default value for the CSS position property. In this mode, the target element is positioned along with the natural document flow. Note that the top, right, bottom, left, as well as z-index properties will not display any effects.
CSS Position: Relative Value
This position value is much the same as the static, however, this value allows for the aforementioned directional properties to have an effect on the position of the target element. The directional properties will move the element from its natural position on the document relative to its own properties such as left or bottom, for example. The offset does not affect the position of any other elements.
CSS Position: Fixed Value
Using this position value, the target element will not be included in the natural document flow. This means that the document will not inherently create a space for the element in the layout as it normally would. These elements are positioned relative to the document, or initial containing block, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. Notably, scrolling will not affect elements with this CSS position value. A fixed element does not leave a gap in the page where it would normally have been located.
CSS Position: Absolute Value
As with the fixed value, an element with the absolute value will be removed from the natural document flow, and no space is created for the element in the page layout. . The element will be positioned accordingly to the closest positioned ancestor element. If that option is not available, then the element will use the document body and move along with page scrolling.
CSS Position: Sticky Value
With the sticky value, the target element receives its positioning from the natural flow of the HTML document. The change in position is taken from the nearest scrolling ancestor element and its containing block. In a sense, this value works the same as “relative” until it hits the “sticky” point, the offset does not affect the position of any other elements. You can think of this as a mixture of relative and fixed values. The example below will demonstrate this.
Notice the scrolling effect within the image below. The sticky element remains in place during the text scroll as the user navigates up and down the HTML page. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.
Understanding the Z Index Property
The Z index property deals with the position for elements that are overlapping or could overlap depending on the design of the page. This position deals with the way the elements stack over each other. It helps you maintain a visible focus on the element you want to be displayed. Overlapping elements with a larger z-index cover those with a smaller one.
Think of your elements on the page as a deck of cards. You put down four of them but want to be sure the Ace is always showing at the top no matter what. The Z index property can alter that stacking order.
Each element has a position value. Remember that the default value is set to static. Any element that has its position value altered to anything other than static will show over those that are set to static. The z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements). Otherwise, all elements will appear on the page as if their position value was set to static; thus with no regard to the z index.
How do I set the Z Index?
Setting the Z index of an element is done just as you would in setting the CSS position, with forethought and consideration. Sometimes it can be beneficial to draw the idea of your layout in another program or even on something as basic as a napkin. Anything that helps you visualize the layout in a more concrete way.
Once you know what element you want showing over others, you can assign it a numerical Z index value. This value can be in negative or positive forms. The greater the value, the higher the element sits on the z index. This means an element with a z index value of 3 will sit on top of an element with a z index value of 1.
In the example below, notice that the Z index value is applied to all three divs inside a container. However, you may also notice that there is no effect to the stacking value on display. This is because none of the divs have a CSS position applied. As such, each one counts as a static positioned element.
In the next example, the div with the id of “two” will be provided with a CSS position value of absolute. This will render the following output on the HTML page.
Notice that div “two” now sits above in the stacking order. Even though div “three” has a higher Z index set, div two still comes out on top. This is due to the lack of a CSS position value set on div three. As such, it has received no effects from the Z index value applied.
Elements to Consider
Control is a wonderful thing to have, especially when you are fine-tuning the elements of your webpage. However, despite all the tools that CSS provides, it can be hard to grasp just what you are in control of sometimes.
CSS has such a wide range of abilities that the process can become overwhelming when you first jump into it. This is why it’s a good idea to pace yourself and become familiar with all the options at hand. That does not mean you have to become a certified master of the craft. Only that you need to understand the need for each of the tools in the box. If you know the “why” behind a CSS tool, then you will be much more prepared to use it in practice.
Building a scrap page to test and refine those tools is a great way to not only learn more about the process but also to just have a bit of fun along the way. Keep at it and the results are sure to impress you when you look back at where you started.
_________________________________________________________________________
Go beyond CSS and position yourself for even greater success. Diving into the world of programming can open the door to brand new roles. If you want to jump-start your career, take the first steps by learning to code. Coding skills can help you make those new professional possibilities into reality. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
