Position indicates the position, position, and status. It also means placement. In the CSS layout, position plays a very important role. Many containers use position to locate.
The position attribute has four optional values: static, absolute, fixed, and relative. Next we will learn their different usage together. In learning, we should think about the layout and use of them.
For more information about the position attribute, see here.
Position: static
This attribute value is the default condition for positioning all elements. In general, we do not need to declare it, but sometimes it is inherited, we do not want to comment on the impact of attributes inherited by elements, so that we can use position: static to cancel inheritance, that is, to restore the default value of element positioning.
For example: # nav {position: static ;}
Position: absolute positioning
With position: absolute, You can accurately move the elements to the desired position and let me move the nav to the upper right corner of the page. We can write: nav {position: absolute; top: 0; Right: 0; width: 200px ;}
The layer before or after the absolute positioning nav layer will think that this layer does not exist, that is, in the z direction, it is relatively independent, it does not affect other Z-direction layers. Therefore, position: absolute can be used to place an element in a fixed position, but it is useless to determine the position of the layer relative to the nearby layer. You can only use the relative positioning discussed below.
Here is a bug in win IE that needs to be mentioned, that is, if a relative width is defined for an absolutely positioned element, the width of IE depends on the width of the parent element rather than the width of the entire page.
Position: fixed position of fixed relative to window
What does this attribute mean? The positioning method of an element is similar to that of absolute, but its contained block is the view area itself. On-screen media, such as web browsers, elements are not moved during browser inspection when documents are rolled. For example, it allows the frame style layout. In a page-based media file, such as a printed output file, a fixed element appears at the same position on the first page. This can be used to generate a flow title or footer. We have also seen similar results, but most of the results are not implemented through CSS, but are applied to JS scripts.
Note that IE6 does not support the position: fixed attribute in CSS. It's really a pity, or we can try this cool effect.
Position: relative location of relative
What does relative positioning mean? Where is it based on relative positioning? We need to clarify the concept that relative positioning is relative to the default location of the element. Since it is relative, we need to set different values to declare the location of the element. The top, bottom, left, and right values are combined to specify the position of the element. If you want to move the nav layer 20 PX down and 40px to the left:
We can write: # nav {position: relative; top: 50px; left: 50px ;}
However, you need to pay attention to the following situations. The woaicss, which is located closely behind the other layer, does not appear below the nav, but overlaps with the nav!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">From this we can see that position: relative is not very easy to use. Nav has been removed and shifted 50px to the right to the left relative to the original position. However, our other container woaicss does not notice anything. As Nav is in the original position (that is, 0 0, rather than 50), it is followed by Nav. You should pay attention to methods and sum up experience when using them.
Article Source: http://www.52css.com/article.asp? Id = 225
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
