Front-end development required: CSS Position full resolution

According to How Well Do You Understand CSS Positioning by Steven Bradley, The entire translation contains my own understanding and thoughts. If the translation is not good or wrong, please give advice to your colleagues.

People tend to use positioning methods when they are new to layout. Because the concept of positioning seems easier to grasp. On the surface, if you specify the position of a block element, it will be located there. However, positioning is a little more complex than what you just saw. For positioning, there are some things that will trip new players, so you need to master them before it becomes your usual skill.

Once you have a deeper understanding of how it works, you can make better things.

CSS box model and positioning type

First, you need to understand the CSS box model. The link in the previous sentence is an article about the box model I wrote in InstantShift. I have explained in detail in that article and will make a quick summary in this article.

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

The positioning mode specifies the location of a box in the overall layout and the impact on the surrounding boxes. The positioning mode includes regular document streams, floating, and several types of position positioning elements.

The CSS position attribute can be set to five values:

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

I will elaborate on the first three values and briefly explain the last two values.

Static is the default position property value. Any element with position: static applied is in the regular document stream. It is determined by the box model.

A static positioning element ignores all the values declared by the top, right, bottom, left, and z-index attributes. To enable your element to use any of these attributes, you must first apply one of the three values for its position attribute: absolute, relative, and fixed.

The element whose position value is inherit is the same as the inherited values of all other attributes. The element simply applies the same position value as the parent element.

Absolute Positioning (Absolute Positioning)

The absolute positioning element is completely detached from the regular document stream. For elements that enclose it, it regards the absolute positioning element as nonexistent. It is like setting the display attribute to none. If you want to keep the position it occupies without being filled by other elements, you need to use other positioning methods.

You can set the absolute position of the element through the top, right, bottom, and left attributes. But you usually only set two of them, top or bottom, and left or right. By default, their values are all auto.

The key to understanding absolute positioning is to know where it starts. If the top is set to 20px, you need to know where the calculation starts.

The starting position of an absolutely positioned element is relative to its parent element whose first position value is not static. If no parent element meets the conditions on its parent Element Chain, the absolute positioning element is located relative to the document window. Ha!

You may be confused about the concept of "relative". In particular, there is something called relative positioning, which we have not mentioned yet.

When you set position: absolute on an element style, it means that you need to consider the parent element. If the position value of the parent element is not static, the starting point of the absolute positioning element is the upper left corner of the parent element.

If the parent element does not apply position positioning other than static, it checks whether the parent element of the parent element has applied non-static positioning. If positioning is applied to the element, the upper left corner of the element becomes the starting point of the absolute element. If not, the DOM will be traversed up until a positioning element is found or the search fails to reach the outermost browser window.

Relative Positioning)

The relative positioning element is determined based on the top, right, bottom, and left attributes. But it only moves relative to their original location. In a sense, setting relative positioning for an element is similar to adding a margin for an element, but there is also an important difference. The difference is that the moving of the relative positioning element is ignored when the element near the relative positioning element.

We can see it as a picture's heavy image starting from the real image position. The position occupied by the original image is still retained, but we can't see it any more. We can only see its image. In this way, the positions of elements can overlap, because the 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 surrounding it. The elements act as if the relative positioning element is still in the normal document stream.

We no longer need to ask where the relative position is. Because the relative position is obviously a normal document stream. Relative positioning is like adding a margin to an element, but it does not happen to any adjacent element. But in fact there is no added margin.

Fixed Positioning)

The behavior of fixed positioning is similar to absolute positioning, but there are some differences.

First, fixed positioning is always relative to the browser window, and the position is determined by the top, right, bottom, and left attributes. It discards its parent element, which is a bit rebellious in positioning.

The second difference is that the name is inherited. Fixed positioning elements are fixed. They do not move with Page scrolling. You can tell the element where it is and never move. Oh ~ It seems pretty clever.

In a sense, the fixed positioning element is a bit similar to a fixed background image, but its outer container block is always a browser window. If you set a background image in the body, it is very similar to the behavior of a fixed positioning element, but the accuracy of the position will be slightly less.

The size of the background image in the third dimension cannot be changed, and the z-index attribute is also introduced.

Breaks the Z-Index of the plane.

This page is a two-dimensional plane. It has width and height. We live in a 3D world with z-index as its depth. This extra dimension can traverse a plane.

 

It can be seen that the high z-index is located on the top of the low z-index and moves toward the top of the page. On the contrary, a low z-index moves under a high z-index and toward the bottom of the page.

If there is no z-index, it will be a bit difficult to locate the element. Because z-index allows a positioning element to be located above or below another element, this may make you something creative. The default value of z-index for all elements is 0, and we can use a negative value for z-index.

Z-index is actually more complex than I described here, but the details are written in another article. Now you only need to 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.

Problem locating

For positioning elements, there are several common problems that deserve our understanding.

　　1. You cannot apply positioning and floating attributes in the same attribute.. This is because the commands of the two are in conflict with each other. If you add both attributes to the same element, you want to use the higher attribute in CSS.

　　2. Margin will not fold on absolute Elements. Suppose you have a paragraph with a margin-bottom of 20 PX. The section is followed by a 30 PX margin-top image. The space between a paragraph and an image is not 50px (20px + 30px) But 30px (30px> 20px ). This is the so-called margin-collapse. The two margin will be merged (collapsed) into a margin.

Absolute positioning elements do not fold margin as they do. This will make them different from 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 its z-index and the z-index of other elements.

There is another problem with IE 6 and IE 7 at the stack level. IE 6 is determined by the level of the outermost positioning element, which of the elements is at the top of the hierarchy, rather than the level of each individual element.

1234	<div    <p </div>

For the above structure, you will expect the section elements 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 above the paragraph. Because img has a higher z-index level than div. Therefore, it is located above the child elements of all Divs.

Summary

The location attribute set on an element operates according to one of the CSS positioning modes. You can set a value in absolute, relative, fixed, static (default), and inherit for the positioning element.

The positioning mode and CSS positioning element define the position of a box in the layout and the elements surrounding it will be affected by the positioning element.

The z-index attribute can only be applied to and located elements. It adds a third dimension to the page and sets the order at the Element Level.

Positioning attributes seem to be easy to understand, but their operations are a little different from what they see on the surface. What you may think is that relative positioning is more similar to absolute positioning. When designing a layout, you usually want to use float and apply positioning on specified elements to break the layout.

Translator's sign language: the whole translation is carried out according to the original line, and a personal understanding of the technology is added in the translation process. If there is something wrong with the translation, please contact your colleagues. Thank you!

White Teeth (http://www.vanseodesign.com/css/css-positioning/)

Link: http://www.cnblogs.com/oooweb/p/css-position-guide.html