HTML format layout

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.

#top {    border:1px solid #999;    height:100px;    width:966px;    top:10px;    left:200px;    right:200px;    background-color: #FFF;    Position:fixed; Z-index:2;}      

Second,position:absolute

1. the outer layer has no position:absolute(or relative), then the div is positioned relative to the browser . 1

2. the outer layer has position:absolute(or relative), then the div is positioned relative to the outer border. 2

Figure 1:

Figure 2:

Three,position:relative

Relative position.

For example, fixed a position relative to the div contained in this Div . If the outer layer does not contain him, it is fixed relative to the browser relative to the position.

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.

<!--[if!supportlists]--> V, <!--[endif]-->float:left, Right

L EFT, right without giving him the position (left,top), directly relative to the browser. If the outer is wrapped, it is displayed relative to the top left or right of the position of the outer Div's drop line.

　　Overflow:hidden; // out part hidden, scroll, scroll bar displayed;

　　<div style= "Clear:both" ></div>// truncated stream

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)

}

HTML format layout