In CSS position attribute: how to use fixed

The position attribute specifies the positioning type of the element, that is, the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolutely positioned or fixedly positioned elements will generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

positionIn addition to the default static, attribute values ​​also include relative, absolute, and fixed. This article focuses on the fixed attribute value.

1. The meaning of the position:fixed attribute

fixed: Generate an absolutely positioned element and position it relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

What we usually call fixed positioning refers to fixed. Elements with fixed positioning will not scroll up and down with the scroll bar.

2. General position:fixed; implementation method

#top{position:fixed;bottom:0;right:20px} realizes that the element with the id of top is fixed at the bottom of the browser and the position 20 pixels from the right

#top{position:fixed;top:20px;right:20px} realizes that the element with id top is fixed at 20 pixels from the top of the browser and 20 pixels from the right The position of a pixel

3. Implementation method of position:fixed; under IE6

Position:fixed; cannot be used directly in IE6. You'll need some CSS Hack to fix it

Same as having the

...

element fixed to the bottom of the browser and 20 pixels from the right , 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)));
}

The right and left attributes can be solved by absolute positioning, while top and bottom need to be implemented using the above expression. The _ symbol in _position:absolute; can only be recognized by IE6. The purpose is to distinguish other browsers

1. Make the element fixed at the top of the browser window:

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

2. Fix the element a pixel from the top of the browser window:

#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 to 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. Fixed the element b pixels from 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)));
_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)));
}

The above is the detailed content of In CSS position attribute: how to use fixed. For more information, please follow other related articles on the PHP Chinese website!