CSS relative positioning
Relative positioning is a very easy-to-understand concept. If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point.
If you set top to 20px, the box is 20 pixels at the top of the original position. If left is set to 30 pixels, a 30-pixel space is created on the left of the element, that is, the element is moved to the right.
#box_relative { position: relative; left: 30px; top: 20px;}
As shown in:
Note that when relative positioning is used, elements still occupy the original space, regardless of whether or not they are moved. Therefore, moving an element overwrites other boxes.
Then we will think about how to overwrite Box 2 in box 3. Naturally, we want to set the z-index in box 3 to a value with a higher priority, for example, 100, however, this does not get the expected result. You must set the z-index in box 2 to a lower priority, for example,-1,
I guess it is because Box 2 is out of the Document Stream, so only setting the z-index in box 3 does not play a role in box 2, so you can only operate on box 2. You can also try the following code in ie7:
<Html>
<Head runat = "server">
<Title> Untitled Page </title>
<Style type = "text/css">
Span
{
Background-color: Red;
Width: 30px;
Height: 30px;
}
# Box_relative
{
Position: relative;
Left: 10px;
Top: 10px; background-color: gray; z-index:-1;
}
</Style>
</Head>
<Body>
<Span> </span> <span id = "box_relative"> </span> <span style = "z-index: 30"> </span>
</Body>
</Html>
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
