about float and position in CSS

Original http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning

When building a page layout, there are different ways to use it. Which method to use depends on the layout requirements of the specific page, and in different situations, some methods may be better than other methods.

For example, you can use a number of floating elements to build a neat and concise page layout. Or, if you need more complex typesetting requirements, you can use other methods, such as relative positioning and absolute positioning.

In this article, we'll first discuss element floats, and then we'll discuss how to control the position of elements using the X, y, and Z axes.

Element floating

When building a page layout, using element floating is an intuitive way to control the position of the element. Element floats allow one element to move near or away from another element. It constructs the relationship between the element and other elements in the layout based on the size of an element and the size of its parent node container.

When an element is floating, is this element next to the previous element, or does it appear on a new line? This depends on the position of its neighboring elements.

Of course, the element floats also brings a lot of problems while providing powerful power. A well-known problem is that when a parent node includes several floating child elements, the parent node's layout takes into account the size and position of the floating child elements, but the child elements do not affect the size of the parent node. In this case, the height of the parent node becomes 0, and the other properties are ignored. Many times, this problem is not noticed, especially when the parent node does not have any CSS styles attached, and the nested elements appear to be correctly arranged.

If nested elements are not properly arranged, typographical errors can be thrown. See the following example, the DIV container with the class name. Box-set should have a light gray background, but because its nested elements are floating elements, the originally expected background color does not appear. If you look at the box model of. Box-set, you will find that its height value is 0.

<div class= "Box-set" >  <div class= "box" >box 1</div> <div  class= "box" >box 2</div >  <div class= "box" >box 3</div></div>

. box-set {  background: #e8eae9;}. box {  background: #8ec63f;  height:100px;  Float:left;  margin:10px;  width:200px;}

One workaround is to add an empty element to the parent container before closing the label, and set its clear:both. The "clear floating element" approach solves most situations, but it is not "semantically correct". As the number of floating elements that need to be cleared on the page increases, the number of empty nodes required increases, but these empty nodes do not have any HTML semantics.

Fortunately, there are some other tricks that are also used, most notably the use of overflow and clearfix techniques.

Using overflow

Setting Overflow:auto on the parent container allows it to automatically include child elements, thus having the actual height value, so that the gray background in the example above will be displayed.

When you use this trick in IE6, you need to set the height or width property for the parent node container. Because height is often mutable in practice, it is the value of setting the width. For IE on the Apple platform, setting Overflow:auto will add scroll bars to the container, so it is best to set Overflow:hidden.

. box-set {  background: #404853;  Overflow:auto;}

This trick has some side effects. For example, if you need to add a style or move a child element beyond the scope of the parent container, such as implementing a border shadow or adding a drop-down menu. In the example below you will see that when the border shadow is outside the scope of the parent container, it is obscured, and the second child element is arranged with a problem.

Using Clearfix

Clearfix are usually paired with: before or: after pseudo-elements. The use of pseudo-elements is to create a hidden element before or after the parent container that contains the floating element. The before pseudo-element uses display:table to create an anonymous Table-cell element that prevents the child element's top margin from disappearing. This trick has a consistent effect in IE6 and 7. Similarly, by setting: After pseudo-elements to prevent the bottom margin of child elements from disappearing.

In addition, you need to use the *zoom property on the parent container to trigger the haslayout mechanism to resolve IE6 and 7 consistency. The haslayout mechanism determines how the element should render and frame its contents, as well as the positional relationships between elements.

In the example below using Clearfix, you will see that the element can be displayed even if it is outside the parent container. (Note border shadow)

. box-set:before,.box-set:after {  content: "";  display:table;}. box-set:after {  clear:both;}. Box-set {  *zoom:1;}

effectively contains floating elements

The specific skill to use depends on your personal habits. Some people tend to use the clearfix technique because it is better to be consistent across browsers. Others feel that clearfix need more code. Therefore, it is not important to choose which skill, it is important to note and write in the document.

A common implementation is to have a uniform class name for all parent containers that need to contain floating elements, which is convenient for managing styles. For example, use the following code so that you only need to add a group's class name to the parent node that needs to contain the floating element.

. group:before,.group:after {  content: "";  display:table;}. group:after {  clear:both;}. Group {  *zoom:1;}

Position property

In some cases, you need more control over the position of the element, and you need to use the position attribute. There are five different values for the Position property.

Position Static

This is the default value of the Position property, which means that the element does not and does not accept any positional offset attributes for that element.

In the example below, all the boxes will be piled up one after the other. Because they are block-level elements and are not floating.

<div class= "Box-set" >  <div class= "box box-1" >box 1</div>  <div class= "box box-2" >box 2 </div>  <div class= "box box-3" >box 3</div>  <div class= "box box-4" >box 4</div> </div>

. box-set {  background: #e8eae9;}. box {  background: #8ec63f;  height:80px;  width:80px;}

Position Relative

Relative positioning is very familiar with the static positioning. The biggest difference is that the relative positioning element can use offsets: top, right, bottom, left. These four offsets allow the element to move in any direction, allowing for precise control of the displayed position.

Note that although the Offset property can be used for relatively positioned elements, it is in the same way as the static position when the page is typeset (this differs from the fixed position and absolute position). In addition, the relative positioning element can overwrite other elements, or be overwritten by other elements, although it is not itself offset.

In the following example, all the boxes are piled up one after the other. But they have changed according to their defined offset relative to their original position. So, some boxes cover the other boxes instead of pushing the other boxes. If an element is relatively positioned (even if it is offset), the elements surrounding it are still referenced by the original position of the element in the layout (referring to the position where there is no offset).

<div class= "Box-set" >  <div class= "box box-1" >box 1</div>  <div class= "box box-2" >box 2 </div>  <div class= "box box-3" >box 3</div>  <div class= "box box-4" >box 4</div> </div>

. 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 top and bottom values are declared, the top value is higher. If you declare both left and right values, the priority depends on the language of the Web page (for example, English, French, German, Spanish). For example, in an English web page, left has a higher priority, and right has a higher priority in Arabic pages.

Position Absolute

An absolutely positioned element accepts an offset. In typography, an absolutely positioned element is erased from its original position (so that the element behind it will occupy its current position), and then positioned according to its relative position of the parent node. If it does not have a relative positioning of the parent node, then the element directly refers to the body container positioning.

Use an offset property for an absolutely positioned element that will be offset by the relative positioning of the parent node as the reference system.

If you do not use an offset property for an absolutely positioned element, the element is placed in the upper-left corner of the parent node. If only the top property is set, the element is offset vertically, while the horizontal direction is still on the leftmost side of the parent node.

In the example below, all boxes are absolutely positioned relative to the parent container. If the offset is a positive number, the box is "pushed in" and if the offset is negative, the box is "pulled outward".

<div class= "Box-set" >  <div class= "box box-1" >box 1</div>  <div class= "box box-2" >box 2 </div>  <div class= "box box-3" >box 3</div>  <div class= "box box-4" >box 4</div> </div>

. 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 an absolutely positioned element has a fixed height and width value:

If both top and bottom values are declared, the top value is higher. If you declare both left and right values, the priority depends on the language of the Web page (for example, English, French, German, Spanish). For example, in an English web page, left has a higher priority, and right has a higher priority in Arabic pages.

If an absolutely positioned element does not have a fixed height or width value:

If the element does not have a fixed height value, but has both top and bottom values, the element will span all the remaining heights except top and bottom. Similarly, if the element does not have a fixed width value, but has both left and right values, then the element will span all the remaining widths except for leave and right. If the element has neither a fixed height nor a width value, but has a top, bottom, left, and right value, then the element occupies all the space except the four-edge distance.

Position Fixed

Fixed positioned elements are similar to absolutely positioned elements, except that the coordinate system it references is the viewport (viewport) of the browser. Fixed-positioned elements do not move as the page scrolls, and it remains in that position. In addition, using fixed positioning in IE6 has a bug that needs to be solved with some hack.

A typical example of using fixed positioning is the top horizontal bar or the bottom bar in a Web page. When the user scrolls through the page, the bar always stays at the top or bottom of the viewport in the browser.

<footer>fixed footer</footer>

footer {  bottom:0;  left:0;  position:fixed;  right:0;}

Z-index Property

A Web page is a two-dimensional space that displays individual elements based on the x-axis and y-axis. However, if you need to put an element on top of other elements (which is not on top of the default layout), you can change her Z-index property and let her run up to him.

The position of the element in the z-axis depends on the order in which it appears in the DOM. If two elements overlap, the elements that first appear in the DOM are usually ranked below the element below. Changing the Z-index attribute of an element first appears to be a simple way to make it appear on top of it. The element with the highest Z-index attribute is always ranked at the top, regardless of its position in the DOM tree.

If you need to set the Z-index property of an element, you must first set the element to be relative,absolute or fixed. Just like for the set top, bottom, left, and right properties.

<div class= "Box-set" >  <div class= "box box-1" >box 1</div>  <div class= "box box-2" >box 2 </div>  <div class= "box box-3" >box 3</div>  <div class= "box box-4" >box 4</div> </div>

. 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;}

about float and position in CSS