Introduction to using CSS positioning

position option to define the positioning of the element attribute , the option has 5 optional values: static, relative, absolute, fixed, inherit

When the attribute value is relative, absolute, or fixedtop | left | right| bottom | z-index can work.

static (default value)

##relative (relative positioning)

absolute (absolute positioning )

fixed (absolute positioning, absolute and window browser, lower version browsers do not support such as ie6 and ie7)

relative and static They are all positioned relative to other elements of the document and belong to the category of relative positioning. The difference is that one can control displacement and the other cannot

static (default value)

If

uses the default value, defining top, left, right, bottom, z-index for elements in CSS will not take effect

relative

relative behaves the same as the default value, except that you can control the offset relative to other normal positions by setting the offset and z-index.

The default value of the positioning (positon) of all elements is static. If you write nothing, it is relative positioning. Use position:relative without setting the topp, left, z-index, right, and bottom values. The behavior is the same as the default value.

absolute and fixed

Features:

1. The width of the block-level element is no longer 100% when it is not defined, but It is automatically adjusted according to the content

2. Without defining z-index, the absolute element will cover other elements.

3. It will break away from the normal document flow and no longer occupy space, similar to the effect after

floating

absolute is relative to the previous parent element that is not static Perform absolute positioning. If the position of the parent element is not specified, absolute will be positioned absolutely relative to the entire

html document.

fixed

Generate absolutely positioned elements, positioned relative to the browser window. That is, no matter how the web page is scrolled, the element always stays at a certain position on the screen. If we want the left side control bar to be always visible to the user, use position:fixe for positioning.

What to do if ie6 and ie7 do not support fixed attributes

Solution

Use position:absolute

_top:expression( eval(

document.documentElement.scrollTop))

The above is the detailed content of Introduction to using CSS positioning. For more information, please follow other related articles on the PHP Chinese website!