Understanding CSS relative positioning and fixed positioning

xTable of Contents [1] relative positioning [2] fixed positioning in front of the words

Generally speaking, the positioning element refers to position elements that are not static, including relative, absolute, and fixed. The basics and applications of absolute absolute positioning have been described in detail earlier, and this blog introduces and combs the relevant knowledge of relative positioning relative and fixed positioning

Relative positioning definition

The simplest positioning mechanism that may be understood is relative positioning. When this mechanism is used, the anchor element is moved by using the Offset property. When the element is positioned relative to it, it is moved from its normal position, but the original space does not disappear. Relative to the positioned element, a new containing block is created for all of its child elements. The containing block corresponds to where the element was originally located

[note] If the relative positioning element encounters an overly restrictive problem, one value is reset to the opposite of the other value. Bottom always equals-top,right always equals-left

Characteristics

"1" Limit range

In general, when you limit the bounds of an absolutely positioned element, set relative positioning relative for its parent element, because the relative anchor element is not detached from the document flow

[note] Relative positioning elements can limit absolute positioning, but cannot limit fixed positioning, because fixed positioning is relative to the window positioning

"2" Promotion level

Using relative positioning is a good idea when you want to raise the level of an element and don't want to move away from the document flow

In-line elements

Unlike an absolutely positioned element, which allows elements to have block-level element attributes, relative positioning is applied to inline elements, because the properties of its inline elements cannot be changed, there is no block-level element attribute, the width height cannot be set, and the margin is still problematic

IE compatible

Under the IE6 browser, the negative margin of the element under Haslayout is hidden from the part of the parent element. This problem can be resolved by setting the value of the position property of the margin negative element to relative.

Fixed positioning

Fixed positioning is similar to absolute positioning, where elements are completely removed from the document stream, but the offset of the fixed element is relative to the window.

Note Ie7-Browser does not support

Characteristics

Fixed positioning and absolute positioning of a lot of characteristics are similar, with a package, destructive and de-floating characteristics, on the browser display properties of the bug, clip properties of the hidden function, the static position beat and overflow failure performance are the same, here will not repeat.

Full Screen Matte

When the page content exceeds the page container size scroll bar, the use of absolute full-screen matte will appear outside the scroll bar is not obscured. Because the parent of the root element html is the height of the document,document and the visible area is consistent, that is, with the window, is not included in the outside of the scroll bar.

At this point, you can only use fixed fixed positioning to achieve full screen matte effect

. Page{position:Absolute;Top:0;Bottom:0; Left:0; Right:0;Background-color:Pink;Z-index:-1;}. Test{width:2000px;Height:200px;Background-color:LightBlue;}

<Divclass= "page"ID= "page"></Div><Divclass= "Test"></Div>    <Button>Absolute</Button><Button>Fixed</Button>

var btns = document.getelementsbytagname (' button ');  for (var i = 0; i < btns.length; i++) {    function() {        this  . InnerHTML;    }}

Click the two buttons individually and drag the horizontal scroll bar to see the effect

Understanding CSS relative positioning and fixed positioning