Ten Steps to learn CSS positioning knowledge http://www.barelyfitz.com/screencast/html-training/css/positioning/ this tutorial explains the following issues in CSS layout: Position: static, position: relative, position: absolute, float as the code of the DIV example: <Div id = "example"> <Div id = "div-before"> <p> id = div-before </P> </div> <Div id = "div-1 "> <Div id =" div-1-padding "> <p> id = div-1 </P>
<Div id = "div-1a">
<P> id = div-1a </P>
<P> lorem ipsum dolor sit Amet, consectetuer adipiscing elit. Integer prespondui sit Amet felis. Integer sit Amet diam. phasellus ultrices Viverra Velit. </P>
</Div>
<Div id = "div-1b">
<P> id = div-1b </P>
<P> lorem ipsum dolor sit Amet, consectetuer adipiscing elit. integer prespondui sit Amet felis. integer sit Amet diam. phasellus ultrices Viverra Velit. NAM Mattis, arcu ut Bibendum commodo, Magna nisi tincidunt tortor, Quis accumsan augue ipsum ID lorem. </P>
</Div>
<Div id = "div-1c"> <p> id = div-1c </P> </div></Div> <! --/Id = div-1-padding/id = div-1 --> <Div id = "div-after"> <p> id = div-after </P> </div> </Div> 1 position: static: This is the default position of all elements. It indicates that the element is not specially positioned and will appear in the document where it should be located. # Div-1 {position: static;} 2 position: relative Relative element should be in the top position, bottom, left, right. # Div-1 {position: relative; top: 20px; left:-40px;} can see the element Div after the div-1-after moving after the div-1, not followed by moving, but keep the original position, because after the div-1 is moved, it still occupies the original position. This feature will be used later to see its usefulness. 3: The absoluteabsolute element will be removed from the document (involved in the concept of normal flow) and placed in the specified position. For example, # div-1a {position: absolute; top: 0; Right: 0; width: 200px;} Because div-A is removed, the following elements will also move up, to fill the gap in div-. You can see that div-A is moved to the upper right corner of the webpage. In fact, what we really want is to place div-A in the upper right corner of the relative div-1, rather than the entire web page. IE has a bug: if the percentage is used to represent width, ie calculates this value based on the element's parent element, rather than based on the moved element. 4 positive: relative and positive: absolute in order to correct the above example as div-A in the upper right corner of the div-1, do this: # div-1 {position: relative;} # div-1a {position: absolute; top: 0; Right: 0; width: 200px;} If an element specified as absolute and its parent element is relative, it will be moved to its parent element, otherwise, it will be based on the root element, that is, the body (? Html. 5 two columns of layout # div-1 {position: relative;} # div-1a {position: absolute; top: 0; Right: 0; width: 200px;} # div-1b {position: absolute; top: 0; left: 0; width: 200px ;}
Use absolute
A benefit: You can layout the position of an element in any order, rather than the declared position of the element in HTML (front-end relationship ). As above, the div-1b is on the left side of the div-1a, but when declaring, The div-1a is on the front. But there is also a problem above. Other elements are hidden. In this example, It is div-after. 6 two columns of absolute height in order to solve the above problem, you can explicitly define the height of the div-1, # div-1 {position: relative; Height: 250px;} # div-1a {position: absolute; top: 0; Right: 0; width: 200px;} # div-1b {position: absolute; top: 0; left: 0; width: 200px, div-after can be seen again. However, the problem is that it is not easy to estimate a correct height. 7 float through floating way to solve the above problem: # div-1a {float: Left; width: 200px;} can be seen, do not define the height of the div-1, you can also see div-after. Float is often used for image la s and other complex la S. Float is the only tool available for complex la S. More than 8 floating columns float adjacent elements, which are arranged one by one. # Div-1a {float: Left; width: 150px;} # div-1b {float: Left; width: 150px;} 9 float with clear in 7 after float is used, the div-1a is float, at the same time, the div-1b surrounded the div-1a. Use clear to remove the perimeter. # Div-1a {float: Left; width: pixel PX;} # div-1b {float: Left; width: pixel PX;} # div-1c {clear: Both;} Use of float and clear, please refer to more materials. For example, the example above http://www.complexspiral.com/publications/containing-floats/ 10 is simple and there is no browser compatibility problem. This resource is good:
Relatively absolute In addition,
- Barelyfitz designs open-source software projects
- Barelyfitz designs screencasts
