Format and layout of HTML static Web pages (position: (fixed, absolute, relative), layered, float (left, right))

First, position:fixed

　　Lock the location (relative to the browser's location), such as the pop-up window in the lower-right corner of some sites.

Example:

Second, Position:absolute

1. There is no position:absolute (or relative) in the outer layer, so the div is positioned relative to the browser, such as B (50 pixels from the right border of the browser and 20 pixels from the bottom).

2. The outer layer has position:absolute (or relative), so the div is positioned relative to the outer border, such as medium BB (50 pixels from the right border of D, and 20 pixels from the lower border of D).

Example:

Third, position:relative

　　Move relative to the default position.

For example, a in the position before moving with relative, AA is the position after moving with relative, AA distance from the original position is 50 pixels, and the left margin of the original position is 20 pixels.

Example:

Iv. Layering (Z-index)

　　Layered in the direction of z-axis, it can be understood to be divided into a stack of paper, the higher the number of layers on top.

In the example above, we saw that AA relative A, because the post code shows a higher level of display, so how do you make a cover AA without changing the code order? As follows:

Example:

V. Float:left, right

Overflow:hidden;//out part hidden; Scroll, display scroll bar;

<div style= "Clear:both" ></div>//Cutoff

To set the style of a hyperlink example:

Attached: Cursor:pointer the mouse to the top of the shape

&copy copyright Symbol ©

Translucent effect:

<div class= "box" > Transparent area <div>

The code in the style sheet is:

. box

{

opacity:0.5; -moz-opacity:0.5; Filter:alpha (OPACITY=50)

}

Formatting and layout of HTML static Web pages (position: (fixed, absolute, relative), layered, float (left, right))