Css{position:fixed} to keep HTML in a browser location

Article Introduction: cross-browser css fixed positioning {position:fixed}.

I do not know if you have noticed, browsing this site, the browser in the bottom right corner of the top of a black right-angled triangle, you can click it to return to the page you are browsing the header. When scrolling the page, its position has not changed any, how do you feel about it? This is done through the CSS positioning attribute {position:fixed}, which allows HTML elements to be detached from the document stream in a browser location.

1. IE7, Firefox, Opera, all support the CSS {position:fixed}, so it is easy to achieve ("detailed positioning and positioning application")
2. IE6 does not support this property, but it is in use! DOCTYPE declaration specifies that standards-compliant (standard) mode can be implemented through CSS hack
3. Under the above statement IE5 and IE5.5 currently do not find through pure CSS can be resolved, but can be implemented through the Internet Explorer-specific expression in the CSS (mobile page fixed elements will move), this and common floating logo ads using JavaScript implementation principle is the same, but can be directly written in CS S is relatively simple
4. The use of IE unique conditional annotation statements can be set for different IE version of the exact settings, while avoiding the code is read by other browsers, personally think than the pure CSS hack good, if you have installed more than one IE (including green version), conditional comments will be the highest version of IE as the standard.

The implementation code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD" >
 
(single IE, purely through conditional annotation to differentiate IE browser)
 
(Multiple ie, through conditional annotation +css hack to distinguish IE browser, obviously more complex than pure condition annotation and difficult to read, put up mainly is easy to have multiple IE browser friends with a PC [generally should do is web development] can directly see the effect, the same below. ）
 
Maybe someone like me, in! When the DOCTYPE declaration is XHTML1.0 strict or XHTML1.1, it prefers to precede the declaration with an XML Prolog (such as: <?xml version= "1.0" encoding= "Utf-8"?>), But at this time IE7 are in quirks (compatible) mode, so the hack for IE6 failure, this time you can IE6 also through expression to achieve.
 
When IE6 is in Quriks mode, IE6 and IE5.5 are almost identical to CSS parsing, so when I see position:fixed for Internet Explorer, I find quirks in ie6/ie5.5/mode. IE5 Unified CSS Solution:
 
<?xml version= "1.0" encoding= "Utf-8"?> <!
DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en"
"Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
 
(single IE, purely through conditional annotation to differentiate IE browser)
 
(Multiple IE, using conditional annotation +css hack to differentiate IE browser)
 
Compared to two pure CSS hack found that two principles seem to be the same, the HTML elements and body elements of the application and the CSS {position:fixed} support level, but this is actually a hack, basically do not have the universality, know this method can be. What you need to be reminded is that the HTML element in the IE6 standards-compliant mode is always filled with the viewable area of the entire browser, regardless of the height and width given to it, and IE5 and Quirks The HTML element and the BODY element in the mode all the wide-height settings are ignored and remain full of the viewer's viewable area, see "HTML Elements in IE" for more information
 
Some might think that the XML prolog can now be introduced with a pure CSS method to solve the problem below IE7, which is cool, but with XML Prolog suddenly found IE6 in quirks mode, Previously in the standards-compliant mode of the design and deformation, oh, this is what we do IE's fate.