How much do you know about position?

People tend to use positioning when they are just in contact with the layout. Because the concept of positioning seems to be more easily mastered. On the surface you specify exactly where a block element is located and it will be situated there. But positioning is a little more complicated than when you first saw it. For positioning, there are things that can trip up the novice, so you need to master them before it becomes your usual skill.

Once you have a deeper understanding of how it works, you can do something even better.

CSS box models and types of positioning

To get a sense of location first you have to understand the CSS box model. The link in the previous sentence was an article about the box model that I wrote in Instantshift. I explained the article in detail and made a quick summary in this article.

In CSS, each element is contained by a rectangular box. Each box has a content area that is wrapped by an inner margin, a box border outside the inner margin, and an outer margin outside the border to separate from the other boxes. You can see this from the picture below.

The positioning mode sets out what position a box should be in the overall layout and how it affects the surrounding box. The positioning pattern includes regular document flows, floats, and several types of position positioned elements.

The CSS position property can take 5 values:

• Position:absolute
• Position:relative
• Position:fixed
• Position:static
• Position:inherit

I'll elaborate on the first three values below and briefly explain the last two values.

Static is the default property value for position. Any element to which position:static is applied is in the regular document stream. Where it is and how it affects the surrounding elements are determined by the box model.

A static-positioned element ignores all top,right,bottom,left and the values declared by the Z-index property. In order for your element to use any of these attributes, you need to first apply one of these three values to its position attribute: absolute,relative,fixed

The element with the position value is the same as the inherited value of all other properties, and the elements simply apply the same position value as the parent element.

Absolute positioning (absolute positioning)

Absolutely positioned elements are completely detached from the regular document stream. For the element that surrounds it, it treats the absolutely positioned element as nonexistent. It's like the display property is set to none. If you want to keep the position it occupies without being populated by other elements, then you need to use other positioning methods.

You can set the position of an absolutely positioned element through top, right, bottom, and left four properties. But you usually set only two of them, top or bottom, and left or right. By default, their values are auto.

The key to figuring out the absolute positioning is knowing where it starts. If top is set to 20px then you need to know where the 20px begins to calculate.

The starting position of an absolutely positioned element is relative to the parent element whose first position value is not static. If no parent element satisfies the condition on its parent element chain, then the absolute positioning element is positioned relative to the document window. Ha!

You may be a little puzzled about the concept of "relative", especially if there is something called relative positioning, which we have not yet mentioned.

When you set Position:absolute on an element's style means that you need to consider the parent element, and if the parent element's position value is not static, then the absolute anchor element's starting point is the upper-left corner of the parent element.

If the parent element does not apply a position location other than static, it checks to see if the parent of the parent element has an application that is not static positioned. If the element has a position applied, its upper-left corner becomes the starting point for the absolute element. If not, it continues to traverse the DOM up until it finds a positioning element or finds a failure to reach the outermost browser window.

Relative positioning (relative positioning)

The relative positioning of the element is also based on top, right, bottom, and left four attributes to determine their position. But only move relative to where they were originally. In a sense, setting relative positioning for elements and adding margin to elements is somewhat similar, but there is one important difference. The difference is that elements around relative positioning elements ignore the move of relative positioning elements.

We can think of it as a picture of the heavy image from the location of the real picture to move a little bit. Its original image occupies the position still, but we can not see it again, only to see its heavy image. This allows for overlapping of positions between elements, as relative positioning elements can be moved to the space occupied by other elements.

The relative positioning element leaves the normal document stream, but still affects the elements that surround it. Those elements act as if the relative positioning element is still in the normal document stream.

We don't have to ask where this relative position is. Because this relative position is obviously a normal document flow. Relative positioning is a bit like adding margin to an element, but it seems like nothing has happened to neighboring elements. But in fact there is no increase in any margin.

Fixed positioning (positioning)

Fixed-position behavior is similar to absolute positioning, but there are a few different places.

First, fixed positioning is always positioned relative to the browser window and determines its position by the top, right, bottom, and left properties of the properties. It abandons its parent element, which is a bit rebellious in its position.

The second difference is that it is inherited on the name. Fixed-positioned elements are fixed. They do not move as the page scrolls. You can tell the element where it is and never move it again. Oh, it's kind of cute.

In a sense, a fixed-position element is somewhat similar to a fixed background image, except that its outer container block is always a browser window. If you set a background picture in the body then it is very much like the behavior of a fixed-positioned element, except that the precision in the position is slightly less.

The background picture does not change its size in the third dimension, and thus brings the Z-index property.

Break the Z-Index of the plane

This page is a two-dimensional plane. It has width and height. We live in a three-dimensional world with Z-index as its depth. This extra dimension is able to traverse a plane.

As the above figure shows, the high Z-index is positioned above the lower z-index and moves toward the top of the page. Conversely, a low z-index is below the high z-index and moves underneath the page.

Without z-index, locating elements can be a bit of a hassle. Because Z-index can make a positioning element above or below another element, this may allow you to make something creative. The default Z-index value for all elements is 0, and we can use negative values for Z-index.

Z-index is actually more complicated than what I've described here, but the details are in another article. Now just remember the basic concept of this extra dimension and its stacking order, and remember that only the positioning element can apply the Z-index attribute.

Positioning of the problem

There are a few more common questions about positioning elements that are worth understanding.

1. You cannot apply positional attributes and floats in the same attribute . Because of the conflicting instructions for what kind of positioning scheme to use. If you add two attributes to the same element, expect the later attribute in the CSS to be the one you want to use.

2.Margin does not collapse on absolute elements . Suppose you have a paragraph with a margin-bottom of 20px. Behind the paragraph is a picture with a 30px margin-top. Then the space between the paragraphs and the pictures is not 50px (20px+30px) but 30px (30px > 20px). This is called the Margin-collapse, two margin will be merged (folded) into a margin.

An absolutely positioned element does not collapse margin like that. This will make them different from what they expected.

3.IE has some bugs on the Z-index. In IE 6, the Select element is always at the top of the stack level, regardless of the z-index of its z-index and other elements.

IE 6 and IE 7 have another problem at the stacking level. IE 6 determines which groups of elements are at the top of the hierarchy, not the hierarchy of each individual element, by the level of the outermost positioning element.

  

  
   


  

 
For the above structure, you will expect the paragraph element to be at the top of the stacking hierarchy. Because it has the largest z-index value. But in IE 6 and IE 7, the picture is above the paragraph. Because IMG has a higher z-index level than Div. So it will be positioned above the child elements of all Div.
 
Summarize
 
The position attribute set on an element operates according to one of the CSS positioning modes. You can set absolute, relative, fixed, static (default), and one of the values in inherit for the positioning element.
 
Positioning mode and CSS positioning elements define what position a box should be in the layout and what elements around it are affected by the positioning element.
 
The Z-index attribute can only be applied to the positioned element. It adds a third dimension to the page and sets the order of the elements at the level.
 
The positioning attribute seems to be well understood, but its operation is somewhat different from what it sees on the surface. You might think that relative positioning is more like absolute positioning. When you are doing layout design you usually want to break the layout by using a float and applying positioning on the specified elements.