Absolute position of CSS

Source: Internet
Author: User
I. Let's look at two examples.
1.xhtml code <Body>
<Div class = "relative">
<SPAN class = "absolute"> test absolute </span>
</Div>
</Body>

2.css code . Relative {position: relative; Height: 120px; Border: 2px solid red ;}
. Absolute {position: absolute; top: 10px; left: 10px;
Padding: 5px; text-align: center;
Border: 5px solid green; Background-color: gold ;}

3. Running result

4. Improve CSS
Remove the positioning of the span parent element. The CSS code is as follows, . Relative {Height: 120px; Border: 2px solid red ;}
. Absolute {position: absolute; top: 10px; left: 10px;
Padding: 5px; text-align: center;
Border: 5px solid green; Background-color: gold ;}

5. Modified running results

Ii. Analysis of results
The absolute position of the element relative to the nearestLocatedIf the element does not have an existing ancestor element, its position may be a body or HTML element based on user-defined differences; absolute positioning elements are separated from the document stream and no longer occupy space. Position: absolute must work together with the top and left attributes to complete absolute positioning.
Therefore, the core idea of absolute positioning is to sort an element out of the normal Document Stream and rearrange it relative to another element.
Note: relative positioning is used to provide an absolute positioning element.LocatedNot to describe relative positioning.

Iii. instance applications
We often encounter the problem of incomplete system fonts. The web page runs well on our computer, but after uploading, we find that the style has changed ...... Of course we can upload a font, but this is not what I want to introduce. Another method is to replace text with an image, so that the image will save the style information of the text without affecting the effect. If the image download fails, the overwritten text will be displayed normally. Image replacement text mainly uses absolute positioning. This method is also used in Seo optimization. It is also a classic case. You can refer to the relevant information and will not go into details here.
Note: relative positioning is used to provide an absolute positioning element.LocatedNot to describe relative positioning.
1.xhtml code <H1> text replacement <H2 id = "h2"> This is a Chinese character <span> </H2>

2.css code # H2 {position: relative; width: 206px; Height: 52px; overflow: hidden ;}
# H2 span {position: absolute; width: 206px; Height: 52px; left: 0; top: 0;
Background: URL ("font.jpg") No-Repeat ;}

3. Running Effect

Iv. instance code
Download Code: Click to download
Text replacement: Click to download

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.