CSS Positioning example Explanation

This article mainly and we introduce the CSS positioning tutorial, small series feel very good, now share to everyone, also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

1. Document Flow

The simple point is that the element determines the arrangement according to its position in the HTML. HTML layout mechanism is to use the document Flow model, that is, block elements (blocks) exclusive row, inline element (inline) is not exclusive line.

Margin is generally used to separate elements from elements, and padding is used to separate elements from content. Margin is used to separate elements from elements so that elements are irrelevant to each other, and padding is used for the interval between elements and content, so that there is a "distance" between the content (text) and (wrapped) elements. As long as the layout is not float and absolute positioning, all in the document flow inside.

2.position Property Introduction

1. static, default value. An element with a position set to static, which is always in the position given by the document stream.

2. Inherit, which specifies that the value of the position property should be inherited from the parent element. However, the attribute value "inherit" is not supported by any version of Internet Explorer (including IE8).

3. Fixed, generating an absolutely positioned element. By default, you can position the specified coordinates relative to the browser window.

4. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. The elements remain in that position, regardless of whether the window is scrolled or not. However, when an ancestor element has the transform attribute and is not none, the coordinates are specified relative to the ancestor element, not the browser window.

5. Absolute, which generates an absolutely positioned element, positioned relative to the closest positioned ancestor element of the element.

6. The position of this element can be specified by the "left", "Top", "right" and "bottom" properties.

7. Relative, which produces a relatively positioned element, positioned relative to the initial position of the element in the document.

8. Use the left, top, right, and bottom properties to set the offset of this element relative to its own position.

3. Relative positioning

The relative generates relatively positioned elements that are positioned relative to their normal positions.

The relative positioning process is completed as follows:

Generates an element by default (static) (and the element floats like a layer). Moving in relation to the previous position, the direction and amplitude of the move are determined by the left, right, top, bottom properties, and the position before the offset is retained.

  <style type= "Text/css" >             #box1 {            margin:20px;            width:200px;            height:200px;            Background-color:yellow;        }        #box2 {            margin:20px;            width:200px;            height:200px;            background-color:red;            /*position:relative;            left:100px;            top:100px;*/        }  </style>  <p id= "Box1" ></p>  <p id= "Box2" ></p>

Where the comment code in BOX2 is not in effect, it is sorted according to the document flow.

However, when the comment code uncomment takes effect, it is moved relative to where it should be rendered in the document flow.

Therefore, the relative positioning of the reference is it itself.

4. Absolute positioning

A big difference between absolute positioning and relative positioning is that when we set an element to absolute positioning, the element will be out of the flow of the document, and the other elements will assume that the element does not exist in the document stream and fill its original position. An absolutely positioned element moves its position according to its reference, and the reference needs to be determined based on the positioning of its ancestor elements.

The so-called based on the positioning settings of its ancestor elements to determine the simple understanding is: relative to the element nearest the positioned ancestor element, if there is no ancestor element set positioning, then the reference is the body layer.

1. Use absolute in the event that the ancestor element is not positioned. In this case, the reference is body. The

2. Ancestor element is positioned, and the ancestor element is considered to be positioned as long as the value is not position:static, and the nearest ancestor element is set as the reference for the absolutely positioned element. In this case, the reference is the most recent ancestor element.

3. Where left/right, Top/bottom is not set, the position of the absolute element is the position of the element in the document flow