Four major uses of the position attribute in DIV layout

Correct use of p layoutAttributespositionAttributes

The original English meaning of Position refers to position, position, and status. It also means placement. In CSS layout, Position plays a very important role, and the positioning of many containers is completed using Position.

The Position attribute has four optional values, which are: static, absolute, fixed, and relative. Let's learn their different uses together. During the study, we should think about which one of them should be used under what layout situation.
For more information about the Position attribute, please refer here.

◆pLayout attribute position:static No positioning

This attribute value is the default positioning of all elements. Under normal circumstances, we do not need to declare it specifically, but sometimes In the case of inheriting , we don't want to see the attributes inherited by the element affect itself, so we can use position:static to cancel the inheritance, that is, to restore the default value of element positioning.
For example: #nav{position:static;}

◆p layout attribute position:absolute　Absolute positioning

Using position:absolute can be very accurate Move the element to where you want it, let me move the nav to the top right corner of the page. We can write like this: nav{position:absolute;top:0;right:0;width:200px;}
The layers in front or behind the nav layer that uses absolute positioning will think that this layer does not exist, that is, in In the z direction, it is relatively independent and does not affect other layers in the z direction at all. So position:absolute is great for putting an element in a fixed position, but it doesn't work if you need to determine the position of the layer relative to nearby layers. You can only use relative positioning as discussed below. There is a WinIE bug that needs to be mentioned here, that is, if you define a relative width for an absolutely positioned element, then its width under IE depends on the width of the parent element rather than the width of the entire page.

◆pLayout attribute position:fixed Fixed positioning relative to the window

What does this positioning attribute value mean? The element is positioned similarly to absolute, but its containing block is the viewport itself. In screen media such as web browsers, elements do not move in the browser view when the document is scrolled. For example, it allows frame style layout. In page media such as printouts, a fixed element appears at the same position on the first page. This can be used to generate flowing titles or footnotes. We have seen similar effects, but most of them are not achieved through CSS, but using JS scripts.

Please note that IE6 does not support the position:fixed attribute in CSS. It's really a shame, otherwise we could have tried this cool effect.

◆pLayout attribute position:relative Relative positioning

What does relative positioning mean? Where is it based on relative positioning? We need to clarify a concept, relative positioning is positioning relative to the default position of the element. Since it is relative, we need to set different values ​​to declare where to position it. The four values ​​​​of top, bottom, left, and right cooperate to clarify the position of the element. If you want the nav layer to move 20px down and 40px to the left:
We can write like this: #nav{position:relative;top:50px;left:50px;}
But you need to pay attention to the following situation, relative The layer woaicss positioned immediately following him will not appear below nav, but will overlap with nav to a certain extent!

The above is the detailed content of Four major uses of the position attribute in DIV layout. For more information, please follow other related articles on the PHP Chinese website!