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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
