Html css style sheet layout and htmlcss style sheet Layout

Source: Internet
Author: User

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)

}

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.