Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use the position attribute in CSS". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to use the position attribute in CSS" can help you solve the problem.

How to use the CSS:position attribute correctly? what does it do?

The original English meaning of Position refers to position, position and status. It also means to settle down. Position plays a very important role in CSS layout, and many containers are located in Position.

The Position property has four optional values: static, absolute, fixed, and relative. Let's learn their different uses together. In learning, we should think about what layout we should use and which one of them should be used.

For more information about the Position attribute, please refer to here.

Position:static has no positioning

This attribute value is the default for all element positioning, in general, we do not need to declare it specifically, but sometimes when we encounter inheritance, we do not want to see the attribute inherited by the element affect itself, so 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 absolute positioning

With position:absolute, you can accurately move the element to the location you want, 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 in front of or behind the nav layer using absolute positioning will think that this layer does not exist, that is, in the z direction, it is relatively independent and does not affect other layers in the z direction at all. So position:absolute is good for placing an element in a fixed position, but there's nothing you can do if you need a layer relative to a nearby layer to locate it. We can only use the relative positioning discussed below.

There is a bug for WinIE that needs to be mentioned, 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.

Fixed positioning of position:fixed relative to the window

What does this positioning attribute value mean? The element is positioned in a similar way to absolute, but its containing block is the viewport itself. In screen media such as WEB browsers, elements do not move in the browser inspection as the document scrolls. For example, it allows frame-style layout. In page-based media such as printout, a fixed element appears in the same location on the page. This can be used to generate flow headings or footnotes. We have seen similar effects, but most of the effects are not achieved through CSS, but with JS scripts.

Note in particular that IE6 does not support the position:fixed attribute in CSS. It's really a pity, otherwise we can try this cool effect.

Position:relative relative positioning

What exactly does the so-called relative positioning mean, and where is the relative position based? We need to make it clear that relative positioning is relative to the default position of the element. Since it is relative, we need to set different values to declare where to locate, and the four values top, bottom, left, and right cooperate to determine the location of the element. If you want the nav layer to move 20px down, move 40px to the left:

We can write: # nav {position:relative;top:50px;left:50px;}

But you need to pay attention to the following situation, the relative positioning of his layer woaicss will not appear below the nav, but will overlap with the nav!

It can be seen that position:relative is not very easy to use, nav has been removed, relative to the original position, moved 50px to the right to the left. But our other container, woaicss, did not notice anything, as if the nav was in its original position (that is, 00, not 5050), unrelentlessly following nav. When using it, we should pay attention to the methods and sum up experience.

This is the end of the content about "how to use the position attribute in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.