HTML CSS determines positioning and filters in detail

1.position:relative; Relative positioning

Does not affect the characteristics of the element itself;

Does not cause the element to break away from the document flow;

If there is no positioning offset , has no effect on the element itself;

Positioning element position control: top/right/bottom/left;

The overflow of the parent under IE6: hidden is the relative positioning that cannot cover the subset ;To solve the problem, you only need to

add the positioning element to the parent;

Under IE6, when the parent width and height of the positioning element are both odd numbers, the bottom and right of the positioning element will have

1px deviation

2.position:absolute;Absolute positioning

Can make the element out of the document flow

Make the inline support width and height;

Block attribute label content expansion width;

By default, the latter level of positioned elements is higher than the former;

Positioning offset relative to the entire document;

If there is positioning The parent is offset relative to the positioning parent. If there is no parent positioning, it is offset relative to the document.

Relative positioning is generally used in conjunction with absolute positioning (used quite a lot);

can be used to clear floats

3.position:fixed; fixed positioning;

can make elements out of the document flow;

can enable inline support Width and height;

Positioning offset relative to the entire document;

Differences from absolute positioning Positioning parent has no effect on fixed positioning, always

Offset;

Problem: IE6 is not compatible with fixed positioning

can be used to clear floats

4.position:static;default is no positioning

5 .position:inherit:inherit; basically useless in work

4.z-index:[number];positioning levelz-index:1;

body

5. Filter, opacity: 0~1; IE private filter filter:alpha(opacity=0~100)

The above is the detailed content of HTML CSS determines positioning and filters in detail. For more information, please follow other related articles on the PHP Chinese website!