CSS Position properties: How to use fixed

The Osition property specifies the positioning type of the element, which is the positioning mechanism used to create the element layout. Any element can be positioned, but an absolutely positioned or pinned anchor element generates a block-level box, regardless of the type of the element itself. Relative positioning elements are offset relative to their default position in the normal flow.

Position property value In addition to the default static, there are relative, absolute, fixed, this article focuses on the fixed property value.

I. Meaning of the position:fixed attribute

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" attributes.

What we call fixed positioning means that fixed positioning elements do not scroll up and down with the scroll bar.

Second, the General position:fixed; Implementation method

#top {position:fixed;bottom:0;right:20px} implements an element with ID top fixed at the bottom of the browser and 20 pixels from the right of the distance

#top {position:fixed;top:20px;right:20px} implements an element with ID top fixed at 20 pixels from the top of the browser and 20 pixels to the right of the distance

Third, IE6 under the position:fixed; Implementation method

It is not possible to use position:fixed directly in IE6. You need some CSS Hack to fix it.

The same or let <div id= "top" >...</div> elements fixed at the bottom of the browser and 20 pixels to the right of the distance, this time the code is:

#top {position:fixed;bottom:0;right:20px;_position:absolute;_top:expression (eval ( Document.documentelement.scrolltop+document.documentelement.clientheight-this.offsetheight-(ParseInt ( this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0)));}

Right and left properties can be resolved with absolute positioning, while top and bottom need to be implemented with the above expression. Among them in _position:absolute; The _ symbol is only recognized by IE6 in order to differentiate between other browsers

1. Fix the element at the top of the browser window:

#top {_position:absolute;_top:expression (eval (Document.documentElement.scrollTop));}

2. Position the element at the top of the browser window a pixel:

#top {_position:absolute;_top:expression (eval (document.documentElement.scrollTop)); _margin-top:a;}

Or

#top {_position:absolute;_top:expression (eval (document.documentelement.scrolltop+a));}

3. Fix the element at the bottom of the browser window:

#top {_position:absolute;_top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0)));}

4. Position the element at the bottom B-pixel from the browser window:

#top {_position:absolute;_top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0))); _margin-bottom:b;}

Or

#top {_position:absolute;_top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | b)-(parseint (this.currentstyle.marginbottom,10) | | b)));}