Examples of the use of position properties in CSS

Position This property determines how the element will be positioned. It has a value of about five kinds:

Each page can be viewed as stacked on top of a layer of pages, as shown in the following figure.

When the position is set to relative, the element is still in the normal stream and the position is in place, and you can move the elements through the left right. Affects the location of other elements.

And when the position value of an element is absolute or fixed, three things happen:

Moving the element to the Z axis, the element is detached from the normal stream, so no longer occupies the original layer of space, but also covers the underlying elements.

The element changes to a block-level element, which is equivalent to setting the Display:block to the element (for an inline element, such as setting the absolute and discovering that it can be set wide).

If the element is a block-level element, the width of the element is changed from the original width:100% (occupy one row) to auto.

Thus, when position is set to absolute or fixed, there is no need to set display as block. And if you don't want to overwrite the underlying elements, you can set the Z-index value to achieve the effect.

Let's take a look at the plug-in's parameter usage examples:

1. position:static

The default positioning of all elements is: position:static, which means that the element is not positioned and appears in the document where it should be.

In general, you do not specify position:static unless you want to overwrite the positioning previously set.

CSS code copy content to clipboard

#div-1 {

position:static;

}

2. position:relative

If you set the position:relative, you can use Top,bottom,left and right to move the element relative to where the element should appear in the document. "means that the element actually still occupies the original position in the document, but visually moves relative to its original position in the document."

CSS code copy content to clipboard

#div-1 {

position:relative;

top:20px;

left:-40px;

}

3. Position:absolute

When Position:absolute is specified, the element is detached from the document "That is, it is not occupied in the document", and can be accurately positioned according to the set Top,bottom,left and right.

CSS code copy content to clipboard

#div -1a {

Position:absolute;

top:0;

rightright:0;

width:200px;

}

4. Position:relative + Position:absolute

If we set relative positioning for Div-1, then all elements within Div-1 will be positioned relative div-1. If you set absolute positioning for div-1a, you can move the div-1a to the upper right of the Div-1.

CSS code copy content to clipboard

#div-1 {

position:relative;

}

#div -1a {

Position:absolute;

top:0;

rightright:0;

width:200px;

}

5. Two column absolute positioning

You can now use relative positioning and absolute positioning to make a two-column layout.

CSS code copy content to clipboard

#div-1 {

position:relative;

}

#div -1a {

Position:absolute;

top:0;

rightright:0;

width:200px;

}

#div -1b {

Position:absolute;

top:0;

left:0;

width:200px;

}

6. Two-column absolute positioning set high

One solution is to set the element to a fixed height. But this is not a good idea for most designs because we don't know how much text is in the element or the exact font size that will be used.

CSS code copy content to clipboard

#div-1 {

position:relative;

height:250px;

}

#div -1a {

Position:absolute;

top:0;

rightright:0;

width:200px;

}

#div -1b {

Position:absolute;

top:0;

left:0;

width:200px;

}