CSS Layout model

In a Web page, elements have three layout models:
1. Flow model Default
2. Floating model (float)
3. Layers Model (layer)

1. Flow model

The flow model is the default page layout mode. This means that the HTML page elements in the default state of the Web page are distributed according to the flow model.

The flow layout model has 2 more typical features:

1th, the block element extends vertically from top to bottom in the containing element , because, by default, the width of the block element is 100%. In fact, a block element occupies a position in the form of a row.

(Each note shows the width of the default)

2nd, in a flow model, the inline elements are displayed horizontally from left to right within the containing element in which they are located. (inline elements are not like blocky elements so overbearing exclusive line)

2. Floating model (float)

Any element is not floating by default, but it can be defined as floating by CSS

Div{float:left;} Div{float:right;}

You can set a different floating way for different div layouts.

3. Layers Model (layer)

There are three forms of the layer model:

1. relative positioning (position:relative)

2. Absolute Positioning (Position:absolute)

3, fixed positioning (position:fixed)

Relative positioning

If you want to set relative positioning in the layer model for an element, you need to set position:relative (for relative positioning), which determines the offset of the element in the normal document stream through the left, right, top, and bottom properties.

The position before the offset is left motionless relative to the previous position. When using relative positioning, even if the element is offset, he still occupies the space before it is offset.

Absolute positioning

If you want to set absolute positioning for an element in a layer model, you need to set Position:absolute (for absolute positioning), drag elements out of the document flow, and then use left, right, top, The bottom property is absolutely positioned relative to its closest parent containing block with a positional property. If there is no such inclusion block (that is, the div in front of it does not have an anchored property), then relative to the body element, that is, relative to the browser window .

An absolutely positioned element is not occupied in the document flow, and if an element has an absolute position set, its position in the document flow is deleted;

We can set their stacking order by Z-index.

Absolute positioning removes elements from the document flow and therefore does not occupy space, and the layout of elements in the normal document flow is the same as when an absolutely positioned element does not exist, and other elements still in the document flow will ignore the element and fill his original space. because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page.

The positioning of a floating element is also based on a normal document flow, which is then drawn from the document stream and moved as far as possible to the left or right, and the text content surrounds the floating element . It just changes the display of the document flow, not out of the flow of the document, understanding this, it is easy to figure out when to use positioning, when used to float.

Fixed positioning

Fixed: Represents a pinned position, similar to the absolute anchor type, but its relative movement coordinates are the view ( the page window within the screen ) itself. Because the view itself is fixed, it does not change with the scroll bars of the browser window, unless you move the screen position of the browser window on the screen or change the display size of the browser window, so the fixed positioned element is always located somewhere in the view in the browser window and is not affected by the flow of the document.

#div1 {

position:fixed;

bottom:0;

right:0

} (always follow the scroll bar with a div box at the bottom of the screen)

Relative positioning can be mixed with absolute positioning principle is: As long as the parent div defines the positioning properties, the child Div will follow the location of the parent div to reposition

4. Say Z-index

4.1 Simple Demo

With Z-index, you can change the order in which elements overlap each other.

Z-index is a special property in the display of Web pages. Because the display is a display of a pattern that is a two-dimensional plane that has an x-axis and a y-axis to represent positional properties. In order to represent three-dimensional concepts such as the stacking order of the upper and lower layers of a display element, the Z-index attribute is introduced to represent the difference between Z-axes. Represents the upper and lower three-dimensional relationship of an element in the stacking order.

Elements with large z-index values are superimposed on elements with a smaller z-index value. For anchored objects that do not specify this property, an object with a positive Z-index value is above it, and an object with a negative Z-index value is below it.

<div style= "width:200px;height:200px;" ></div><div style= "position:relative; top:-50px; width:100px;height:100px; " ><div>

Two Div, the second move up 50px, the normal situation should be like this

The second Div obscures the first Div and adds the Z-index property to the second one.

<div style= "width:200px;height:200px;" ></div><div style= "position:relative; top:-50px; width:100px;height:100px;z-index:-5; " ><div>

It turns out this way, Z-index's simplest application is that.

4.2 Valid only for positioned elements

The Z-index property is useful for locating elements (objects with a position property value of relative or absolute or fixed) to determine the stacking order of positioned elements on a perpendicular to the display direction (called the z-axis), i.e., if the element is not positioned, The z-index that is set on it will be invalid.

<div style= "width:200px;height:200px;z-index:30" ></div><div style= "position:relative; top:-50px; Width:100px;height:100px;z-index:10; " ><div>

Although the z-index of the first Div is larger than the second Div, the Z-index property does not work because the first Div is not positioned, so it is still overwritten by the second Div.

4.3 Parent-child relationship processing

If the parent element is z-index valid, the child element, regardless of whether it is set Z-index, is consistent with the parent element, above the parent element

<div style= "POSITION:RELATIVE;WIDTH:200PX;HEIGHT:200PX;Z-INDEX:10;" >        <div style= "POSITION:RELATIVE;WIDTH:100PX;HEIGHT:100PX;Z-INDEX:-5;" ><div>    </div>

Although the child element setting Z-index is smaller than the parent element, the child element still appears above the parent element

If the parent element Z-index fails (not positioned or uses the default value), then the Z-index setting for the anchor child element takes effect

<div style= "position:relative;width:200px;height:200px;" >        <div style= "POSITION:RELATIVE;WIDTH:100PX;HEIGHT:100PX;Z-INDEX:-5;" ><div></div>

child element z-index=-5 effective, overridden by parent element

4.4 Same Z-index who's down on who?

1. If none of the two elements are set Z-index, use the default value, one position is not positioned, then the anchor element overrides the anchor element

<div style= "position:relative;top:50px;width:200px;height:200px;" ></div><div style= "width:100px;height:100px;" ><div>

2. If none of the two elements are positioned coincident or two are positioned and z-index the same occurrence, then the document flows sequentially, followed by the previous overlay.

<div style= "position:relative;width:200px;height:200px;" ></div><div style= "position:relative; top:-50px; width:100px;height:100px; " ><div>

Reprint to Http://www.cnblogs.com/chaixiaozhi/p/8481253.html

CSS Layout model