CSS implementation elements are positioned relative to the browser window

Article Introduction: CSS Implementation relative to the browser window positioning thorough research.

Web Developer/designer often need to "fix" an element at a location on the page. such as pop-up window, floating ad bit ... In this article, we will describe in detail how the simple CSS implementation elements are positioned relative to the browser window.

position:fixed generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" properties.

a good browser instance that supports the standards of the Consortium

In browsers such as IE9, Firefox, Chrome, and so on, if we want an element to be absolutely positioned in the middle of the window, we can assign it a CSS style:

width:336px;
height:280px;
left:50%;
top:50%;
margin-left:-168px;
margin-top:-140px;
position:fixed;

Here the values of Margin-left and margin-top should be modified to half the width and height of the main area of your page.

fixed IE version <7 does not support position:fixed bugs

IE version <7 Browser does not support the Position:fixed property, so did not achieve the desired effect, this time to the Ie<7 browser to write a separate style.

(1) using Javascript to calculate the desired top value

Insert in head:

<!--[if IE lt 7]>
<link rel= "stylesheet" href= "Style.css" type= "text/css" media= "screen"/>
<![ Endif]-->

Writes to the target positioning element style in the STYLE.CSS style sheet:

Position:absolute;
Top:expression (eval (document.body.scrollTop + 50));

To prevent the flashing of scroll bars when scrolling, you need to define HTML properties for:

HTML {
    background-image:url (About:blank);/* Use a browser blank page as
    the background/background-attachment:fixed; * * Make sure that when the scroll bar scrolls, the element does not blink * /
}

We can use JAVASCRIPT to compute the desired top value in the CSS operator expression that is unique to IE, which achieves the same effect as position:fixed.

(2) using the container to the overflow content processing way to realize

Define the body inside and outside margin of 0, the HTML and browser window to achieve the same size, so that the body appears scroll bar, elements relative to the HTML relative positioning.

body {padding:0; margin:0;}
HTML {overflow:hidden;}
body {height:100%; overflow:auto;}

Define element attributes for IE6:

Position:absolute;
top:50%;
left:50%;
Margin-top: -140px;
Margin-left: -168px;

keep elements in the browser

The elements are positioned on the left, right, top, and bottom of the browser, respectively, to demonstrate the style:

Position:absolute;
Bottom:auto;
Top:expression (eval (document.documentElement.scrollTop));/* IE6 Head Fixed * *

Position:absolute;
Right:auto;
Left:expression (eval (document.documentelement.scrollleft+document.documentelement.clientwidth-this.offsetwidth )-(parseint (this.currentStyle.marginLeft, 0)-(parseint (this.currentStyle.marginRight, 0))-* IE6 fixed right/

Position:absolute;
Bottom:auto;
Top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentStyle.marginTop, 0)-(parseint ( This.currentStyle.marginBottom) 0));/* IE6 Fixed Bottom * *  *

Position:absolute;
Right:auto;
Left:expression (eval (document.documentElement.scrollLeft));/* IE6 Left fixed * *