[Reserved] CSS Tutorial: examples to explain the positioning Position

http://www.missyuan.com/thread-395406-1-1.html

1. position:static

The default positioning of all the elements are: position: static, which means that the elements are not positioned, and it appears to be in position in the document.

In general, do not specify position: static, unless you want to locate set before covering.

#div-1 {
 position:static;
}

static

2. position:relative

If the setting position: relative, you can use the top, bottom, left and right with respect to the position of the element in the document should appear to move this element. [Meaning element is actually still occupies the position of the original document, but visually identical to its original location in the document moved]

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

relative

3. position:absolute

When you specify position: absolute, the element is free from the document [that is not already occupied a position in the document], can accurately follow top, bottom, left and right to locate a set.

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

absolute

4. position:relative + position:absolute

If we are to set the relative positioning of div-1, then all the elements within div-1 will be positioned relative to div-1. If set to absolute positioning div-1a, the div-1a can be moved to the top right of div-1.

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

relative-and-absolute

5. two column absolute positioning

Now you can use the relative and absolute positioning to do a two-column layout up.

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

two-column-absolute

6. two column absolute positioning given high

One solution is to set a fixed element height. But this program is not suitable for most designs, because generally we do not know how many there will be a text element, or the exact size to be used.

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

two-column-absolute-height

7. Floating

For variable height columns, the absolute positioning does not work, the following is another solution.

We can float an element, it moves to the left / right, and the text that surrounds it. This is mainly used for the image, but here we use it for a complex layout tasks (because this is our only tool).

#div-1a {
 float:left;
 width:200px;
}

float

8. Floating Column

如果我们把一个元素向左浮动，并且把第二个元素也向左浮动，they will push up against each other。

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

float-columns

9. 清除浮动列

在浮动元素之后，我们可以清除浮动来使其他元素正确定位。

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

float-columns-with-clear

虽然我一直用浮动布局，但是掌握好 position 也是必须的，其实也没那么难的。。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<STYLE TYPE="text/css">
body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 12px;
    padding: 0;

    text-align:center;
    background-color:#000000;

}
#Divbody {
  width:1000px;
  height:900px;
  margin:auto;
}
#div-before {
  width:100%;
  height:20px;
  background-color:#FF0000;
}
#div-after {
  width:100%;
  height:20px;
  background-color:#FD0000;
}
#div-1 {
  width:100%;
  height:500px;
  background-color:#999999;
   position:relative;

}
#div-1a {
  width:200px;
  background-color:#3300FF;
  float:left;

}
#div-1b {
  width:300px;
  height:250px;
  background-color:#66FF00;

}
#div-1c {
  width:100px;
  height:250px;
  background-color:#00FFFF;
  margin:auto;

}
</STYLE>
</head>

<body>
<div id=Divbody>
    <div id=div-before>#div-before</div>
    <div id=div-1>
        <div id=div-1a>Based on a true story, the Chinese ballet which made its premiere in 1964Based on a true story, the Chinese ballet which made its premiere in 1964Based on a true story, the Chinese ballet which made its premiere in 1964 depicts the liberation of a peasant girl on Hainan Island. The classic ballet will be performed by the Chinese Central Ballet Troupe in Guangzhou in June.
        </div>
        <div id=div-1b>Based on a true story, the Chinese ballet which made its premiere in 1964 depicts the liberation of a peasant girl on Hainan Island. The classic ballet will be performed by the Chinese Central Ballet Troupe in Gu.
        </div>
        <div id=div-1c>Based on a true story, the Chinese ballet which made its premiere in 1964 depicts the liberation of a peas.d.        </div>    </div>    <div id=div-after>#div-after</div></div></body></html>

Reproduced in: https: //www.cnblogs.com/ericsun/p/4064847.html