Fixed vertical center floating layer code for pure CSS positioning, with a classic commentary: Detailed description of positioning and positioning applications

This article by myself original, if reproduced, please explain the source: http://blog.csdn.net/xxd851116/archive/2009/06/29/4308161.aspx

The floating layer in HTML is the first difficulty for many web page lovers, mainly in positioning. If you are not familiar with CSS positioning, read here: http://andymao.com/andy/post/70.htmland read this document.

 

[Requirement ]:

Divide a webpage into three parts: Header, body, and foot. As follows:

--------------------

Header

--------------------

Body

--------------------

Foot

--------------------

Requirements: 1. High Head and foot, and the head is at the top of the browser, and the foot is at the bottom of the browser. The height can be changed;

2. place two vertical centered divs on the left and right of the body, similar to floating ad strips, with fixed positions and not scrolling with the scroll bar;

 

[Problem ]:

1. How to fix the layer?

/* Fixed the default style settings for the global floating layer. ff and IE */<br/> are supported. fixed {position: fixed;} <br/> * HTML Div. fixed {position: absolute; Right: 16px;}/* [only for IE] "Right = 16px" is used to display the scroll bar, that is, the minimum right value is 16px */

For more details, please click here: http://andymao.com/andy/post/70.html (I think it is more detailed, share with you );

The following excerpted text is as follows:

Due to advertisement abuse, some browser software began to intercept advertisement content, so that some good results are not recommended for use now. For example, an element may change its position in the browser as the webpage rolls. Now, I can use a position attribute in CSS to achieve this effect. This element attribute is the position: fixed that was not supported in the past. Its meaning is fixed positioning. This fixed position is very similar to absolute positioning. The only difference is that absolute positioning is fixed in a certain position on the webpage, while fixed positioning is fixed in the browser's frame position.
Although the original browser does not support a property, the development of the Browser allows the current advanced browser to correctly parse this CSS property. In addition, IE6 can achieve this effect through CSS hack (ie5.x cannot be used currently.
2. How to center vertically?

The problem is that DIV is absolutely centered. In fact, so easy! The following is my idea: Set the top of the fixed positioned Div to 50%, and move it to half of the height of the layer (margin-top is negative ), for example, to center a div vertically with a height of 50% PX, set "position: absolute; top:; margin-top:-100px!

Therefore, horizontal center is also solved. If the layer width is 50% PX, the "position: absolute; left:; margin-left:-100px" code can solve the horizontal center problem.

That is to say, the two are combined horizontally and vertically! Hey hey...

 

[Download test source code]: Click to download the complete test code. (This code is a part-time task. If you have any problems, please correct me. Detailed problem source code are described)