CSS Layout model

CSS Layout model

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

Layer model--absolute positioning

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

The following code can implement a DIV element to move to the right of 100px relative to the browser window and move the 50px down.

div{    width:200px;    height:200px;    BORDER:2PX Red Solid;    Position:absolute;    left:100px;    top:50px;} <div id= "Div1" ></div>

The effect is as follows:

Layer model--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. Relative positioning is done by first generating an element in static (float) mode, and then moving relative to the previous position , the direction and amplitude of the move is determined by the left, right, top, and bottom properties. The position before the offset is left motionless.

The following code is implemented to move down 50px relative to the previous position, moving 100px to the right;

#div1 {    width:200px;    height:200px;    BORDER:2PX Red Solid;    position:relative;    left:100px;    top:50px;} <div id= "Div1" ></div>

：

What is the "position before offset"?

You can do an experiment by adding a span tag after the 19-line div tag in the right-hand code editor, and writing some text in the span tag. The following code:

<body>    <div id= "Div1" ></div><span> the position before the offset is still intact, overwriting the previous Div without the position before the offset </span></ Body>

：

It is obvious from this that, although the DIV element is offset from the previous position, the previous position of the DIV element is retained, so the later span element is displayed behind the DIV element's previous position.

Layer model--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 anchored element is always located somewhere in the view in the browser window and is not affected by the flow of the document. This is the same as the Background-attachment:fixed property feature. The following code enables you to move the 100px to the right relative to the browser view and move the 50px down. And the position is fixed when you drag the scroll bar.

#div1 {    width:200px;    height:200px;    BORDER:2PX Red Solid;    position:fixed;    left:100px;    top:50px;} <p> text-Text text-text-text-text-text-text text-text-text-text text-text-text-text-text-text-text-text-text-text-text-text text-text text-Text textual text text </p>

Relative combined with absolute

The small partners learned the absolute positioning of the 12-6 bars: using the position:absolute set element can be implemented relative to the browser (body) Set positioning, have you ever wondered if you could be compared to other elements of the positioning? The answer is yes, of course you can. Use Position:relative to help, but you must abide by the following specifications:

1. The reference positioning element must be a predecessor element of the relative positioning element:

<div id= "Box1" ><!--Reference positioned elements--    <div id= "Box2" > Relative reference elements for positioning </div><!--relative positioning elements-->< /div>

It can be seen from the above code that BOX1 is the parent element of Box2 (the parent element is, of course, the predecessor element).

2, the reference positioning elements must be added position:relative;

#box1 {    width:200px;    height:200px;    position:relative;        }

3, positioning elements to join Position:absolute, you can use top, bottom, left, right to offset positioning.

#box2 {    position:absolute;    top:20px;    left:30px;         }

In this way box2 can be positioned relative to the parent element Box1 (here the reference point can be not a browser, but can be set freely)

CSS Layout model