css position property talk

Foreword

Today I would like to talk about the css position property. That is the element positioning attributes. The purpose of it is to sort out its own study and work experience accumulated.

standard

The MDN document , CSS property is used to specify a position targeting element in the document. Offset properties also need to top, right, bottom and left to determine the final position of the element. It applies to all elements, no inheritance, creates layered context. The positioning of the value of a total of 5 (?):

1. position: static defaults
2. position: relative relative positioning
3. position: absolute absolute positioning
4. position: fixed fixed positioning
5. position: sticky viscous Location

Because the position property is very basic knowledge, so in the following pages I will not use a lot of pictures or demo demonstration effect. After all these elements should be able to consult the documentation or tutorial to know.

The default value is static

When the position attribute of the element is not provided or is static, the flow element in the document, and the other left offset property does not work. The document said z-index value is invalid. I thought for a moment, if the element is in the normal flow of the document, generally do not have other elements in conflict with him up and down in the stack, so the z-index of basic scenario is not. Maybe I have a place to drain to consider? In addition to these, static there is no special place.

Relative positioning relative

Set the relative positioning of the elements still in the document flow, the space it occupies is retained. However, if the vertical and horizontal offset property, it is moved to the home position with respect to the corresponding direction, at this time there are still elements of the space around the elements are not rearranged. That is, the original position of the element is placed on a transparent bricks, invisible but tangible. Further, the relative positioning of elements create a block containing, as a child element positioned inside the base point.

Containing block definitions:, or the contents of the boundary line within a table cell blocks inline-block ancestor box (content edge) consists of block-level nearest ancestor frame.

Determination of the block comprising:

Absolute positioning absolute

Absolutely positioned elements will be out of the document flow (normal flow), this time of its original space is 0, that is, there is no clear brick footprint. Near the elements will be rearranged. Meanwhile, the element will produce formatted context (the BFC), the upper and lower margins are not merged, will not collapse because of the height of the internal float.

Define and explain the reason for judgment containing block, because absolute positioning an anchor element is the nearest enclosing block, up and down the offset properties are set to include a block of the upper left corner as the origin (with the related text direction) . As can be seen from the figure above, if the absolute position property positioned ancestor element is static, then the block will be with respect to the initially contained ---- body positioning. If the present position is the ancestor elements other property values, the relative positioning of its containing block created.

In fact, here want the float to be a contrast, see Zhangxin Xu blog mentioned in the floating elements can be seen as there is no wide high inline-block elements, but absolute positioning is no wide free high inline-block elements. As for why as inline-block elements, I do not remember ~

Fixed positioning fixed

Fixed positioning element, positioning the viewport relative to the screen, in this case will not change the position of the scroll. If you are printing pages, the element fixed position on every page will appear. Further, fixed positioning element format is also created context.
The document also mentioned that there is a special situation will affect fixed positioning. When the transform attribute is the parent element will not be none, fixed positioning of the container to the parent element, rather than the viewport. This unexpected situation is the need to pay attention and avoid.
Finally, if you are a mobile end web developer, you will encounter some bug under ios system webview fixed layout. The bug may not be able to find the perfect solution, it is encountered, then consider js dynamically modifying the style or direct judgment on the re-layout of it.

Positioning sticky viscous

This targeting believe many people have never seen, because it is a test property, the document recommended not to use in a production environment. However, its function is very easy to use, you can find out.

Positioning viscosity is fixedly positioned relative positioning and combination. The threshold value is set approximately vertically offset properties. Exceeds the threshold value if the transition is fixedly positioned relative positioning.

Because it is a new property, so go to this demo to see it.

demo, the code mainly

dt{
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
}

First, viscous positioning support case in the browser can see the basic support, except ie. But does not support table-related elements in Firefox, chrome does not support thead tr and other elements. So you want to normal use, you may need to add -webkit and other prefix.
Next, set top: -1px as the threshold value. When the relative positioning of the element as the element, if the distance relative to the top block inclusive> = - 1px, will be transformed into a fixed positioning. So to use sticky positioning is critical to set the threshold.

In addition to the functions shown demo, targeted viscosity scenarios may also be used in so-called sticky footer in. I believe there is such a product often layout will ask it ~

Width limited targeting elements

In many cases, we will absolutely positioned elements are using the vertical and horizontal center

position:absolute;
top:0;
bottom:0;
right:0;
left:0;
width:50%;
height:50%;
margin:auto;

In this case, since the margin is set to auto value, and according to the equation:
margin padding + + + border element width = width / height
it will be set to half of the margin where the respective directions of the spare part, centered achieved.

However, absolutely positioned elements are not yet out of the document flow? Why margin would work? The original is because we also set up vertically and horizontally offset property. Generally, we only need to set up or down, left or right, If both up and down or left and right, that is, the opposite direction of the positioning property while positioning specific value when the fluid characteristics occurs. At this time, the absolute width as the width of the positioning element comprises a block will adapt. Absolutely positioned elements in this case on a normal document flow and elements like, you can use margin: auto conduct is centered.

Triangular relationship between the display / float / position

1. When set to absolute positioning element positioned or fixed, floating property is invalid, the display block is also changed value. That is the case elements are block-level elements.
2. If the display is set to none, this time elements disappear, setting the float property position and there will be no meaning.

to sum up

It took two hours, checking documents, books and blog, summarizes the concept, application scenarios and manifestations position attributes. Some knowledge only in passing, such as this is not common knowledge BFC, document flow, margins and so consolidation, as well as the document text direction.

Nevertheless, I think the only position attributes, I have some of their own experience tells currently clear. Or a little sense of accomplishment, ha ha.