Anatomy of CSS position positioning

When people just touch the layout, they tend to use the positioning method more often. Because the concept of positioning seems to be relatively easy to grasp. On the surface, you specify exactly where a block element is located, and it will be there. But positioning is a little bit more complicated than what you just saw. For positioning, there are some things that will trip the novice, so you need to master them before it becomes your dominant skill.

Once you have a deeper understanding of how it works, you will be able to do something better.

　　CSS box model and type of positioning

First you need to understand the CSS box model in order to figure out the positioning. The link in the previous sentence is an article I wrote about the box model in Instantshift. I have done a detailed explanation in that article and will make a quick summary in this article.

In CSS, each element is contained by a rectangular box. Each box will have a content area, the content area is wrapped by an inner margin, the inside margin is the box border, and outside the border, there will be a margin to be separated from the other boxes. These you can see from this picture below.

The positioning mode specifies where a box should be positioned on the overall layout and how it will affect the surrounding boxes. The positioning mode includes regular document flow, floating, 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 give you a detailed description of the first three values below and briefly explain the last two values.

Static is the default property value of position. Any elements that have position:static applied are in the regular document flow. 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 apply one of these three values to its Position property first: absolute,relative,fixed

The position value is the same as the inherited value for all other properties of the inherit element, and the element simply applies the same position value as the parent element.

　　Absolute positioning (Absolute positioning)

Absolutely positioned elements are completely detached from the regular document stream. For an element that surrounds it, it treats the absolutely positioned element as non-existent. It is as if the display property is set to none. If you want to keep the position it occupies without being filled by other elements, then you need to use a different positioning method.

You can set the position of an absolutely positioned element by using top, right, bottom, and left four properties. But you usually only set 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 the top is set to 20px then you need to know where the 20px starts to calculate.

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

You may be a little confused about the concept of "relative", especially if there is something called relative positioning, which we haven't talked about yet.

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

If the parent element does not apply a position location other than static, it checks whether the parent element of the parent element has a non-static location applied. If the element has a positioning applied, its upper-left corner becomes the starting position of the absolute element. If not, it will continue to traverse the DOM up until it finds an anchor element or looks for a failure to reach the outermost browser window.

　　Relative positioning (Relative positioning)

Relative positioning elements are also based on top, right, bottom, and left four properties to determine their position. But just 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 an important difference. The difference is that the element around the relative positioning element ignores the movement of the relative positioned element.

We can think of it as a picture of the weight of the image from the real position began to move a little bit. The position occupied by its original image remains, but we can no longer see it, only to see its heavy image. This allows for overlapping of positions between elements, as relative positioning elements can be moved into the space occupied by other elements.

Relative positioning elements leave the normal document flow, but still affect the elements surrounding it. Those elements behave as if the relative positioning element is still in the normal flow of the document.

We don't have to ask where this relative position is. Because this relative position is obviously a normal flow of documents. Relative positioning is a bit like adding a margin to an element, but it seems like nothing has happened to neighboring elements. But it doesn't actually add any margin.

　　Stationary positioning (fixed positioning)

Fixed positioning behaves like absolute positioning, but there are a few different places.

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

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 located and never move again. Oh, it seems pretty cute.

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

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

　　Breaking 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 that uses z-index as its depth. This extra dimension is capable of traversing a plane.

It is known that the high Z-index is located 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 below the page.

Without the z-index, the positioning element would be a bit of a hassle. Because Z-index can let a positioning element lie 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 I described here, but the details are written in another article. Now just remember the basic concept of this extra dimension and its stacking order, and remember that only the anchored element can apply the Z-index property.

　　The problem of positioning

For the positioning of elements by a few more common problems, it is worth our good understanding.

　　1. You cannot apply positional properties and floats in the same attribute. because there is a conflict between the instructions for what kind of positioning scheme to use. If you add two attributes to the same element, you'll want to use it when you expect the later attribute in the CSS.

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

An absolutely positioned element does not collapse a margin like that. This will make them different than expected.

　3.IE has some bugs on 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.

There is another problem with IE 6 and IE 7 at the stacking level. IE 6 is determined by the level of the outermost positioned element to determine which group of elements is at the top of the hierarchy, rather than at the level of each individual element itself.

<p style= "Z-index:" >      <p style= "z-index:1" ></p>   </p>   

For the above structure, you will expect the paragraph element to be at the top of the stack level. Because it has the largest z-index value. But in IE 6 and IE 7, the picture is at the top of the paragraph. Because IMG has a higher z-index level than p. So it will be at the top of all the child elements of P.

　　Summarize

The position attributes set on an element operate 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 anchor element.

Positioning mode and CSS positioning elements define where a box should be located in the layout and the elements surrounding it will be affected by the positioning element.

The Z-index property can only be applied to positioned elements. It adds a third dimension to the page and sets the order of the elements at the level.

The positional property 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 similar to absolute positioning. When you do a layout design, you often want to use floats and apply positioning on the specified elements to break the layout.