(8) Positioning of the box

Positioning of the box

First, positioning (position)

Positioning position Description:
Set the positioning of the object, you can make the layout layer easy position absolute positioning, control the box object more accurate.

  positioning  position  syntax:  
 
  position :  static ,  absolute ,  relative ,  fixed   .  static : Called static positioning, which is the default property value, that is, the box is laid out according to a standard flow, including a floating pattern.  relative : referred to as relative positioning, the position of the relative box is often based on the standard flow layout and then offsets the specified distance from its original position relative to the box. The relatively positioned box is still in the standard flow, and the box behind it still treats it as a standard flow.  Absolute : Called absolute positioning, the position of the box is offset by its include box. The absolutely positioned box is detached from the standard flow. This means that they have no effect on the positioning of the sibling boxes behind them, and the other boxes are as if the box does not exist.  fixed : Called fixed positioning, it is similar to absolute positioning except that it is positioned as a reference in the browser window, that is, when you drag the scroll bar of a browser window, the position of the object remains unchanged. 
 
  Position  Specifies the offset horizontally by the left or right property to specify The vertical direction is specified by top and bottom. left , right , top , bottom  These 4 properties are valid only if the Position property is set to absolute, relative, and fixed.  
  

Some of the underlying code is provided below:

<! DOCTYPE html> {margin:20px;Font:Arial 12px;}#father{Background-color:#a0c8ff;Border:1px dashed #000000;padding:15px;}#son{Background-color:#D2B48C;Border:1px dashed #000000;padding:10px;}</style>

：

1, static (stationary positioning)

In the CSS position, set static to the default value, which indicates that the block remains in the original position, that is, the value does not have any movement effect, here is detailed.

2, relative (relative positioning)

The position of the box with relative positioning is often based on the layout of the standard flow and then offsets the specified distance from the original standard position relative to the box. The relatively positioned box is still in the standard flow, and the box behind it still treats it as a standard flow. The offset specified by position can be set using properties such as Left,right,top,bottom.

(1) In addition to setting the Position property to the relative property, set some offset distances by using the right property and the bottom property, as follows:

#son {    background-color:#D2B48C;     Border:1px dashed #000000;     padding:10px;     position:relative;     Right:28px;     Bottom:28px;}

：

You can see that the box box is moving 28 pixels to the left and up, as opposed to the original position, meaning that the "right:28px" function is to make the box box 's new position 30 pixels to the left of its original position, " The function of bottom:28px "is to make the new position of the box box 28 pixels above the bottom border of the original position." Here are the two CSS properties for right and bottom, and in fact there are 4 positional properties in the CSS that are used with the Position property, with top and left in addition to right and bottom.

When the sub-block uses relative positioning, it is offset, even if moved to the outside of the parent box, the parent box will not become larger, as if the child box does not change.

(2) Case of two sub-blocks

The following is a discussion of the case of two sub-blocks. Change the base code above to the following code and put two sub-div in the parent div. First, no offsets are set for either of them.

<! DOCTYPE html>{margin:20px;Font:Arial 12px;}#father{Background-color:#a0c8ff;Border:1px dashed #000000;padding:15px;}#father Div{Background-color:#B2D4BC;Border:1px dashed #000000;padding:10px;}#son1{}#son2{}</style>

：

You can see that the settings for the two sub-blocks are still empty. The following first sets the CSS for box box 1 to:

#son1 {                                                                        #sonposition:relative; Bottom:28px; Right:28px;}

Look again:

Compared to the previous one, you can see that the position of the child block "boxBox 1" is offset by 28 pixels on its own basis, and the box box 2 has no change. The above experiment is done for the standard flow mode, in fact, the use of relative positioning of the floating box is the same, will be a specified offset from the original position and reach the new position, and this offset does not have any effect on the sibling elements behind it.

"Relative positioning" principle:  (1), the use of relative positioning of the box, relative to its original position, by offset the specified distance, to reach the new position.  (2), the use of relatively positioned box is still in the standard flow, it has no effect on the parent block and the brother box.

Relative positioning is the original position of the box itself in the standard flow or floating as the offset datum.

3, Absolute (absolute positioning)

The upper-left corner of the body object is positioned as a reference).

Some of the underlying code is provided below:

<! DOCTYPE html>{margin:20px;Font:Arial 12px;}#father{Background-color:#a0c8ff;Border:1px dashed #000000;padding:15px;}#father Div{Background-color:#D2B48C;Border:1px dashed #000000;padding:10px;}#son2{}</style>

：

(1) Try to use absolute positioning, the #son2 CSS Set location, currently it is still blank, the following changes it to:

#son2 {    position: absolute;     top: 28px;     Right: 28px;}

：

is based on the browser window, moving 28 pixels from the upper-right corner, down and to the left. Does this raise the question of whether all absolute positioning is based on the browser's benchmark? "The answer is no, then make a change to the above code, add a positioning style for the parent Div, the code is as follows:

#father {    background-color:#a0c8ff;     Border:1px dashed #000000;     padding:15px;     position: relative;}

：

The effect shown has changed, the offset distance has not changed, but the offset datum is no longer the browser window, but its parent div.

The principle of absolute positioning:

(1), the use of the absolute positioning of the box with its "recent" "has been positioned" "ancestor element" as the benchmark to offset, if there is no already positioned ancestor elements then the browser as a benchmark to locate.

(2), the absolutely positioned box is detached from the standard flow, which means that they have no effect on the positioning of the sibling box behind it, and the other boxes are as if the box does not exist.

4. Fixed (stationary positioning)

Fixed positioning is somewhat similar to absolute positioning, except that the benchmark for positioning is not an ancestor element, but a window for a browser window or other display device. When a visitor drags the scroll bar of a browser window, the pinned positioned element remains in a position relative to the browser window. This is not covered in detail here.

5. Z-index (Space position)

The Z-index property is used to adjust the top and bottom position when positioning, the page is an X-y axis, the direction perpendicular to the page is the z axis, and a page with a large Z-index value is above its value.

The value of the Z-index property is an integer, which can be positive or negative. When the block is set to the Position property, the value can be set to overlap the high and low relationships between the blocks. The default Z-index value is 0, and when the Z-index value of two blocks is the same, the original high and low coverage relationship is maintained.

The positioning of the box to the end of the introduction, thank you for your appreciation!

(8) Positioning of the box