Html css style sheet layout and htmlcss style sheet Layout

Html css style sheet layout and htmlcss style sheet Layout

I. position: fixed

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

Example:

 

Ii. position: absolute

1. The outer layer does not have position: absolute (or relative); then the div is located relative to the browser, for example, center B (50 pixels away from the right border of the browser and 20 pixels away from the bottom border ).

2. The outer layer has position: absolute (or relative); then the div is located relative to the outer border, such as bb (50 pixels from the Right Border of d and 20 pixels from the bottom border of d ).

Example:

Iii. position: relative

Relative position.

For example, it is fixed relative to a certain position of the div containing this div. If the outer layer does not contain other elements, it is fixed relative to the browser.

Example:

 

4. layer (z-index)

Layered in the Z axis, you can think of it as a pile of paper, the higher the layers, the closer to the top.

In the above relative example, we can see that aa hides a, because the higher the display level of the Code to be written later, so how can I make a cover aa without changing the code order? As follows:

Example:

 

 

V,Float: left, right

LWhen eft and right are used, you do not need to specify the location (left and top) for them, directly relative to the browser. If the external is wrapped, the upper left or upper right corner of the position of the row to be removed from the external div is displayed.

Overflow: hidden; // hide the excess part; scroll: displays the scroll bar;

<Div> stream Truncation

Example of setting the hyperlink style:

 

 

Appendix: cursor: The shape when pointer Points to the top

©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)

}