All pages on W3School sites have adopted this technology, we use CSS if you open the file, you'll see our div footer cleaned up, and the footer div above three are left floating.
CSS relative positioning
Relative positioning is a very easy concept to grasp. If an element relative positioning, it will appear in its place on. Then, by setting the vertical or horizontal position, so that the element "relative to" move its starting point.
If the set top 20px, then block 20 pixels below the top place in situ. If left set to 30 pixels, 30 pixels of space will be created in the left side of the element, the element that is the right move.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
As shown below:
Note that when using relative positioning, regardless of whether or not to move, the elements still occupy the original space. Thus, the mobile element causes it to cover other block. Then we will think how to make box three box two covering it, it is natural to think of the box z-index to a 3 priority high value such as 100, but this does not get the results we want, must the z-index box 2 is set to low priority such as -1, I guess because the box 2 has been out of the document flow, so only set the z-index box 3 2 no effect on the box, it can only block 2 is operated. You can also try the following code in under ie7 by:
<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>
CSS absolute positioning
Absolute positioning the position of the document element is independent of flow, and therefore does not occupy space. This relative positioning of the different, in fact, be considered part of the relative positioning of the normal stream localization model, since the position of the element relative to its normal position in the stream.
Normal flow layout of other elements like the absolutely positioned element does not exist:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
As shown below:
Position absolute positioning of elements relative to the nearest positioned ancestor element , if the element has no positioned ancestor element, its position relative to the initial containing block .
The main problem for positioning to remember the meaning of each location. So now let us review the knowledge learned it: the relative position is the initial position "relative to" elements in the document, and the absolute position is "opposed to" ancestor nearest positioned ancestor, if there is already targeted element, then the "relative to" the first block comprises.
Note: The different user agent, comprising the first block may be canvas or HTML elements.
Tip: Because absolutely positioned box has nothing to do with the document flow, so they can cover other elements on the page. By setting z-index property to control the order of stacking the blocks.
If you want the same path on the frame 3, then 2 z-index also set on the frame 2, and if it is provided only on the frame 3 is invalid. You can also try the following code in under ie7 by:
<html>
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
span
{
background-color: Red;
width: 30px;
height: 30px;
}
#box_relative
{
position: absolute;
left: 20px;
top: 20px; background-color: gray;
}
</style>
</head>
<body>
<span style="z-index:30"></span><span id="box_relative"></span><span style="z-index:30"></span>
</body>
</html>
CSS float
See below, when the floating frame 1 to the right, it moves to the right and from the document stream, until it hit the right edge of the right edge of the box comprising:
Again see below, when the floating frame 1 to the left, which flows from the document and move to the left until its left edge of the line containing the left edge of the box. Because it is no longer in the document flow, so it does not occupy space, in fact, cover the frame 2, the frame 2 to disappear from view.
If all three boxes are moved to the left, then a block comprising the left until it hits the floating frame, floating Until additional two blocks across a floating box to the left.
, If the frame contains too narrow to accommodate the three floating elements arranged horizontally, the other below the slider is moved downward, until there is enough space. If the height of the floating element are different, as they could be moved downwardly other floating elements are "stuck":
CSS float property
In CSS, floated elements we achieve through the float property.
For more information about the float property, please visit the Reference Manual: CSS float property .
Line box and clean-up
Floating box next row block is shortened, thus leaving room to the floating frame, floating line box around the block.
Therefore, creating a floating box to make the text around the image:
To prevent line box around the floating box, the box needs to apply the clear property . clear attribute values may be left, right, both, or none, which indicates that the border should not float next frame.
To achieve this effect, the cleaning elements being on the outer margin of the space enough to add the following block floating down to the top edge of the vertical elements:
This is a useful tool, it allows for the element floats around to make room.
Let's take a look at and clean up floating in greater detail. Suppose you want to make a picture of the text block floating to the left, and want this picture and text contained within another element having the background color and border. You might write the following code:
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
In this case, there is a problem. Because the float out of the document flow, so surrounded by pictures and text div does not occupy space.
How to make surround elements surrounding the floating element in the visual it? Need to be applied in this element somewhere clear:
Unfortunately, there is a new problem, because there is no existing elements can be used to clean up, so we can only add an empty element and clean it up.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
.clear {
clear: both;
}
<div class="clear"></div>
In this way we can achieve the desired effect, but you need to add extra code. There are often elements can be applied to clear, but sometimes have to lay out a meaningless tag added.
But there is also another way, that is a floating container div:
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
float: left;
In this way we will get the desired effect. Unfortunately, the next element will be affected by this floating element. To solve this problem, some people choose to everything in the layout to float, then use the appropriate meaningful element (often the footer of the site) for these floating clean. This helps to reduce or eliminate unwanted marks.
In fact, all the pages on the site W3School have adopted this technology, we use CSS if you open the file, you'll see our div footer cleaned up, and the footer above three are left floating div .