When building a page layout, there are different methods can be used. Which method you use depends on the specific page layout requirements, under different circumstances, some other method may be better ways too.
For example, a number of floating elements can be used to construct a clean and simple page layout. Or, if you need a more complex layout requirements, can Dynasty use other methods such as the use of relative and absolute positioning.
In this article, we will first discuss the elements float; then, we'll discuss how to use the x, y and z-axis position of the control element.
Floating elements
when constructing a page layout, the floating element used is an intuitive way to control the position of the element. Elements can make a floating element near or away from the other elements. It is to construct the relationship between the elements in the layout with the other elements of the parent node according to the size and the size of a container element.
When an element is floated, this element is an element next to the former, or appear in a new line? It depends on the position of its neighbors.
Of course, the floating element while providing strong power, it also brings a lot of problems. A well-known problem is that when a parent node includes a number of sub-elements floating, the layout of the parent node will take into account the size and position of the floating sub-elements, but does not affect the size of the child element of the parent node. In this case, height of the parent node becomes 0, and ignore the other properties. Many times, the problem has not been noticed, especially if the parent is not attached to any combination of CSS styles and nested elements also appear to be correctly ranked.
If not properly aligned nested elements, it may lead to errors on the layout. See the following example, the class DIV container named .box-set should have a light gray background, but because of its elements are nested floating elements, it had the desired background color does not appear. If you see the box model .box-set, you'll find it's height is 0.
.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 100px;
float: left;
margin: 10px;
width: 200px;
}
One solution is to add an empty element is closed before the parent container label, and sets it clear: both. "Clear floats" This move can solve most cases, but it is not the "semantic correct". With the increase in the number of the page you want to clear the float, the number of empty nodes need have increased, but these empty node does not have any HTML semantics.
Fortunately, there are some other tips to use the same, the most famous is the use of overflow and clearfix skills.
Use overflow
disposed on the parent container overflow: auto it can automatically include child elements, so as to have the actual height value, in this embodiment the gray background will be displayed.
Height needs to be set to the parent node in the container when using this trick IE6 or width attribute. Since the actual height is often variable, the value of width is provided. For IE on the Apple platform, set overflow: auto will increase the scroll bar to the container, so it is best to set overflow: hidden.
SET {-.box
background: # 404 853;
overflow: Auto;
}
This move some side effects. For example, the need to increase or style subelement moving beyond the scope of the parent container, to achieve such dark borders or plus a drop down menu. In the following example you will see that, when the dark borders outside the scope of the parent will be covered the container, while the second sub-element are arranged problem.
Use clearfix
clearfix usually with a: before or: after pseudo-elements to use. Pseudo-element is used to create a hidden element in front of or behind the parent vessel comprises a floating element. To create an anonymous table-cell element table, thereby preventing the top margin child elements disappear: Through: Use display before pseudo-element. This move has the same effect in IE6 and 7. Similarly, by providing: after pseudo elements to prevent the bottom margin of the sub-elements disappear.
In addition, the need to use the property of the parent container * zoom trigger hasLayout mechanism to resolve IE6 and 7 of consistency. hasLayout mechanism to decide what elements should be rendered and framed its contents, and the positional relationship between the elements.
In the case of using clearfix below, you will see even beyond the parent container element may also show. (Note dark borders)
.box-set:before,
.box-set:after {
content: "";
display: table;
}
.box-set:after {
clear: both;
}
.box-set {
*zoom: 1;
}
Effectively contain the floating element
which technique you use depends on your personal habits. Some people prefer to use clearfix skills, because it consistency in cross-browser better. Others think clearfix require more code. Therefore, the choice of which technique is not important, it is important to note comments and written documents.
A common implementation is to give all the parent container needs to contain floated elements of a unified class name for easy management style. For example using the following code, which only needs to contain the parent node plus the floating element group class name.
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
}
Position attribute
In some cases, you need more control over the position of the element, this time you need to use the position property. There are five different position property values.
Position Static
This is the default value of the position property, it does not mean that this element is not to accept any position of the element offset property.
In the following examples, all the boxes are piled up one by one. Because they are block-level element, and is not floating.
.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
width: 80px;
}
Relative Position
relative positioning is very met in static positioning. The biggest difference is that the relative positioning element can be used Offset: top, right, bottom, left . This offset allows four elements move in any direction, so that precise control of the position shown.
Note that, although the relative positioning of the element can be used offset properties, it is in accordance with the layout in the page is the same manner with the static position (this is different from the fixed position and absolute position). Further, the relative positioning element may cover other elements, or other elements are covered, although it itself does not shift.
In the following examples, all the boxes are piled up one by one. But they each are defined in accordance with offset relative to the original position was changed. So, some other box covered box, rather than pushing other boxes. If an element is relative positioning (even it did offset), the elements around it at the time of publishing reference is still the original position that element (finger position when there is no offset).
.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
position: relative;
width: 80px;
}
.box-1 {
top: 20px;
}
.box-2 {
left: 40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
If both the top and bottom of the declared value, the higher the value of top priority. If both the left and right of the declared value, then the priority depends on the language pages (for example, English French German Spanish). For example, the page in English, the higher priority is left; Arabic page, the higher the priority right.
Position Absolute
absolute positioning receiving element offset. In the layout, the positioning elements from the absolute original position is erased (the elements behind it will occupy its current position), position location and relative positioning of its parent node. If it is not positioned opposite the parent node, then the container body is positioned with reference to the elements directly.
Offset using absolute positioning properties of element, this element will be positioned opposite a parent node as a reference frame offset.
If no offset is absolute positioning properties of element, then the elements will be placed in the upper left corner of the parent node. If only the top attribute, then the element is offset in the vertical direction only, horizontal direction while still relying on the leftmost parent node.
In the following examples, all of the boxes made with respect to the parent container absolute positioning. If the offset is positive, then the box is "push in"; if the offset is negative, then the box is "pull the" a.
.box-set {
background: #e8eae9;
height: 200px;
position: relative;
}
.box {
background: #8ec63f;
height: 80px;
position: absolute;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}
If absolutely positioned elements have a fixed height and width values:
If both the top and bottom of the declared value, the higher the value of top priority. If both the left and right of the declared value, then the priority depends on the language pages (for example, English French German Spanish). For example, the page in English, the higher priority is left; Arabic page, the higher the priority right.
If absolutely positioned elements no fixed height or width value:
if the element is not fixed height value, but they also have the value of top and bottom, then the element will be in addition to across the top and bottom of all the remaining height. Similarly, if the element is not a fixed value width, but at the same time has a value of left and right, then in addition to the element would span all the remaining left and right width. If neither element fixed height and width values, but also have top, bottom, left, right value, then the element will occupy all the space in addition to the four sides of the distance.
Position Fixed
fixed positioning of elements with absolutely positioned elements are similar, except that it is a reference coordinate system browser viewport (viewport). Fixed positioning of elements that do not move with the page scroll, it will remain in that position. In addition, in IE6 fixed positioning a BUG, need to use some hack to solve.
A typical example is the use of fixedly positioned top or bottom rails bar page. When the user scrolls the page, the bar always stays at the top or bottom of the browser viewport.
footer {
bottom: 0;
left: 0;
position: fixed;
right: 0;
}
z-index attribute
page is a two-dimensional space, the respective display element in accordance with the x-axis and y-axis. However, if you need to make an element placed on top of other elements (available in the default layout, she was not in his above), then you can change the z-index attribute her, so she went to his above.
Element depends on the order it appears in the DOM in the z-axis position. If two elements overlap occurs, the first element occurring in the row below the DOM element occurs generally after. Change the z-index attribute appears first element is a simple way to make him appear more above. Attribute with the highest z-index elements were always ranked in the top, regardless of its position in the DOM tree.
If you need to set the z-index attribute of an element, you must first set this element is relative, absolute or fixed positioning. Just like for set top, bottom, left, right property.
.box-set {
background: #e8eae9;
height: 160px;
position: relative;
}
.box {
background: #8ec63f;
border: 3px solid #f7941d;
position: absolute;
}
.box-1 {
left: 10px;
top: 10px;
}
.box-2 {
bottom: 10px;
left: 70px;
z-index: 3;
}
.box-3 {
left: 130px;
top: 10px;
z-index: 2;
}
.box-4 {
bottom: 10px;
left: 190px;
z-index: 1;
}
