Position's English original meaning refers to position, position, state. There is also the meaning of placement. In CSS layout, position play a very important role, a lot of container positioning is done with position.
The Position property has four optional values, respectively:
static, absolute, fixed, relative。 We are going to learn the different uses of them together, and in learning we should think about which of these should be used in the layout.
For more information on position properties, please refer to here.
position:static No location
The property value is the default for all elements to be positioned, and in general we do not need to declare it specifically, but sometimes we encounter inheritance, and we do not want to see the attribute impact itself inherited by the element, so that we can use Position:static to cancel the inheritance, that is, to restore the default value of element positioning
such as: #nav {position:static;}
Position:absolute Absolute Positioning
With Position:absolute, you can move the element exactly where you want it, and let me move the nav to the top right corner of the page. We can write this: nav {position:absolute; top:0; right:0; width:200px;}
The front or rear layer of the NAV layer that uses absolute positioning will assume that the layer does not exist, that is, in the z direction, it is relatively independent and does not affect the other Z-direction layers in the slightest. So Position:absolute is useful for putting an element in a fixed position, but there is nothing you can do if you need a layer relative to a nearby layer to determine the location. You can only use the relative positioning that is discussed below.
There is a win IE bug to mention that if you define a relative width 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.
fixed position of position:fixed relative to window
What do you mean by this positional attribute value? 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 through browser inspections when the document scrolls. For example, it allows a frame style layout. A fixed element appears in the same position on the first page in the page-type media, such as print output. This can be used to generate a flow title or footnote. We have seen similar effects, but most of the effect is not achieved through CSS, but the use of JS script.
Note in particular that IE6 does not support position:fixed properties in CSS. It's really a pity, otherwise we can try this cool effect.
position:relative relative positioning
What does the so-called relative positioning mean, based on where the relative is? We need to be clear about the notion that relative positioning is relative to the location of the default position of the element. Since it's relative, we need to set a different value to declare where the position is, top, bottom, left, and right four numeric fits to clarify the position of the element. If you want to move the NAV layer down 20px, move left 40px:
We can write this: #nav {position:relative; top:50px; left:50px;}
But you need to pay attention to the following situation, relative positioning followed his layer woaicss will not appear in the nav below, but and nav occur a certain overlap!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>www.52css.com</title>
<style type= "Text/css" >
<!--
#nav {
width:200px;
height:200px;
position:relative;
top:50px;
left:50px;
Background: #ccc;
}
#woaicss {
width:200px;
height:200px;
Background: #c00;
}
-->
</style>
<body>
<div id= "NAV" ></div>
<div id= "Woaicss" ></div>
</body>
So position:relative is not very useful oh, NAV has moved, relative to the original position, to the right and left to move 50px. But our other container woaicss nothing, as Nav is in the original position (that is, 0 0 position, not 50 50), followed by the nav behind. We should pay attention to the method and sum up experience in using.
