How to pinpoint a fixed-size div in the middle of a Web page and not change with the resolution setting (the position size is unchanged)

All of the box models start with the normal flow of elements in the document, while positioning the position property allows us to change these natural locations. By taking advantage of some simple CSS rules, position allows designers to place HTML elements precisely, and the position attribute determines the reference point for each element frame (box) positioning.

Before we go into detail, let's briefly explain the 4 ways to locate:

1, static positioning (Static): This method makes all the elements of the final position is a stationary position. So there's nothing special to say.

2. Absolute positioning (absolute): This method allows the user to specify the relationship between the upper-left corner of the element, the lower-right corner, or other reference points and the nearest parent element to drag the element out of the normal document flow. When the page scrolls, the elements keep their respective positions intact, as the pages scroll together, as if they were glued together.

3. Fixed positioning: This method allows elements to be placed relative to the actual browser window.

4. Relative positioning (relative): This method defines the location that the browser places it in the default case. This is hard to explain, and it is gratifying that this method is seldom used.



static positioning static

The default value for positioning is static, not using positional properties, and using this value has no effect on the page.

Absolute positioning Absolute

When an element is absolutely positioned, the first thing the browser does is to completely remove it from the stream and place it in the position specified by the location attribute. Take a look at the following example:

#sidebar {
Position:absolute;
top:100px;
right:200px;
width:280px;
}
It said that the absolute positioning of the elements from the middle of the flow, so that any element in the middle of the flow will not be affected, see the Web site of the ad bar, the following text will not be affected by any of its effects, that is the effect! And here is the positioning that refers to the element, right! is the element, which means you can use it on any element (including inline elements oh), and of course more is used on the div.

And if I put two absolutely positioned elements, who would be obscured? Here we need to introduce a property called Z-index, and the greater the value of this property, the more the element will appear. Let's look at the effect on the edge. We set the previous element to z-index:99;

What about absolute positioning of elements nested within an absolutely positioned element? This thing is to be clear, do not say we did not tell you ah, it uses the absolute positioning is relative to its parent position, rather than the entire page.

Note: Individuals do not use absolute positioning to layout your site, because the content of the site will often be based on how much of your database content to display, that is, you can not fully determine the height of the site (there is a reason not to determine the height is because the widescreen computer more and more). You will not be able to cope with such changes after absolute positioning, such as you cannot be sure where your footer is located.

Fixed positioning

Fixed positioning the position of the specified element is basically the same as when you use absolute positioning, but with a different effect. Its location is relative to the browser window, the following div is, you scroll the mouse wheel to see it clear.

#sidebar {
position:fixed;
top:300px;
left:-90px;
width:280px;
}
Note: position:fixed; This property is not compatible in IE6! Now the use of IE6 a lot of ah, that can not be allowed to leave it, I provide a simple case, you can see through the CSS hack how to solve the problem.


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>position:fixed in IE6 correction </title>
<style type= "Text/css" >
<!--
body{padding:0 10px;height:100%;
Font-size:12px;overflow-y:auto;}
#leftMenu {background: #CCCCCC; height:300px; width:150px;
position:fixed; left:40px; top:30px; border:1px solid #666666; padding:10px;
Letter-spacing:0.2em; Color: #990033;}
#main {background: #36F; margin-top:450px; margin-bottom:300px;
Float:right; padding:10px; Color: #FFF;}
* Html{overflow-x:auto;overflow-y:hidden;}
* HTML #leftMenu {position:absolute;}
-
</style>
<body>
<div id= "Leftmenu" >
<p> This is the menu on the left, with fixed positioning in the standard browser, rather than the standard browser (IE6), using some hack, and IE6 itself bug! </p>
<p>enjoy it! (Is this English handsome?) ) </p>
</div>

<div id= "Main" >
<p> This is a test, IE6 under Position:fixed is not available, but we use some techniques to perfectly fix this bug! </p>
<p> Drag the page to the right of the scroll bar, you can see, the gray left menu is always fixed, this phenomenon not only IE7, FireFox, under the IE6 also has a more perfect performance ~ This is a test, IE6 under position:fixed is not used, But we can fix this bug! perfectly with some tricks. </p>
</div>
</body>
Relative positioning relative




This method is rarely used, and may not be used by anyone, or can be seen by others. Let's take a look at how it works, and the relative positioning element is still part of the page flow, unlike absolute positioning and fixed positioning. But it defected at the last moment of its appearance, and it left its position, shifted to the position of CSS, the original post? Leave it to him!

Who forced it to rebel? We use the position:relative, and the browser is the culprit! You can try to see how the guy you specified is a traitor, and I'm not going to be the villain.

Original: http://www.360doc.com/content/11/0904/18/1609343_145753747.shtml

How to pinpoint a fixed-size div in the middle of a Web page and not change with the resolution setting (the position size is unchanged)