HTML CSS determines positioning and filters in detail

高洛峰
Release: 2017-03-31 11:17:31
Original
1914 people have browsed it

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!