I couldn't understand it before, but I had to rely on a short period of "abuse experience" to make the desired results. Later I carefully studied Hutia's xscroller and carefully read the document, only then can we know that this position attribute actually refers to the positioning of the ontology on the superiors. It would be easy to understand.
The default attribute values are static and static. You don't have to talk about it. The most important thing is
Relative (relative) and absolute (absolute ).
If we copy other people'sCodeThe absolute attribute is used together with left and top to create a "floating layer" effect. However, sometimes we need to focus on the floating effect of a container, rather than the window. At this time, the calculation of height and width is not only troublesome, but also almost impossible to achieve the perfect effect. I couldn't do anything at the beginning. Later I found that I only needed to set the position of the style attribute at the upper level to relative.
That is to say, the effect of the position attribute value is directly affected by the position attribute value in the container style.
For example, the nested structure of the following A-B
<Div id = "A">
<Div id = "B">
</Div>
</Div>
When the position of a is relative, the position of B is absolute. At this time, left: 0 and top: 0 are no longer for the window document, but for the DIV with ID.
In this way, some B/S-based applications are developed.ProgramYou can easily add some UI elements, such as the close button of an activity layer.
The test code is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> untitled page </title>
<Style>
. Menu {
Width: 900px;
}
. Menu {
Display: inline; width: 100px; Vertical-align: middle; text-align: center; display: block; float: Left; Z-index: 9999;
}
. Menubar {
Height: 20px; Background-color: Blue; width: 500px; position: relative; top: 20px; Z-index:-1; left: 0px; width: 900px;
}
. Menu A: hover {
Background-color: red; verflow: hidden; Height: 40px; Z-index: 9999;
}
</Style>
</Head>
<Body>
<Center>
<Div style = "width: 900px; Height: 40px; position: relative">
<Div class = "menu" style = "height: 20px;">
<A href = "http://www.my400800.cn"> 400 telephone </a> <a href = "http://www.my400800.cn/400YeWuJianJie.aspx"> 400 telephone introduction </a> <a href = "http://www.my400800.cn/400ZiFeiBiaoZhun.aspx"> 400 telephone charges </a> <a href = "http://www.my400800.cn/400DianHuaShenQingLiuChengJiGaiNian.html"> 400 Telephone Application Process </a> <a href = "http://www.my400800.cn/LianXiWoMen.html"> Contact Us </a>
</Div>
<Div class = "menubar" style = "position: absolute">
</Div>
</Div>
<Div style = "width: 900px;">
Body content test
</Div>
</Center>
</Body>
</Html>
The display effect is as follows:
document. writeln ("
Body content test
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
