标签：返回顶部 位置 oct static 布局 title oat html htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--body{-->
<!--margin: 0;-->
<!--}-->
<!--.div1{-->
<!---->
<!--width: 100px;-->
<!--height: 100px;-->
<!--}-->
<!--.div2{-->
<!---->
<!--!*position: relative;*!-->
<!--position: absolute;-->
<!--top: 100px;-->
<!--left: 100px;-->
<!--width: 100px;-->
<!--height: 100px;-->
<!--}-->
<!--.div3{-->
<!---->
<!--width: 200px;-->
<!--height: 200px;-->
<!--}-->
<!--.box2{-->
<!--border: solid 3px red;-->*/
<!--/*position: relative;*/-->
<!--}-->
/*.outer{*/
/**/
/*}*/
/*.menu1{*/
/*width: 100px;*/
/*!*height: 50px;*!*/
/*color: red;*/
/*float: left;*/
/*}*/
/*.menu2{*/
/*width: 100px;*/
/*!*height: 50px;*!*/
/*color: red;*/
/*float: left;*/
/*}*/
/*.menu3{*/
/*clear: both;*/
/*}*/
/*.bottom{*/
/*text-align: center;*/
/**/
/*clear: both;*/
/*}*/
/*.div1{*/
/*height: 1000px;*/
/*width: 100%;*/
/**/
/*!*display: none;*!*/
/*}*/
/*.a1{*/
/*position: fixed;absolute;*/
/*bottom: 20px;*/
/*right: 20px;*/
/*}*/
/*</style>*/
</head>
<body>
<!--正常文档流：将元素在进行排版布局的时候按照从上到下，从左至右的顺序排版的布局规格-->
<!--脱离文档流：将元素从正常文档流中取出后进行覆盖
脱离文档流：
float：浮动(非完全脱离)
position：
fixed：固定在窗口的某个位置，脱离正常文档流
absolute：完全脱离文档流，原来的位置被覆盖，如果父级是非static模式，则按照父级的位置移动
static(默认): 无特殊定位，对象遵循正常文档流
relative：非完全脱离，遵循正常文档流，依然占据原来的文档流位置，参照父级的位置移动，无父级则参照原来的位置移动
一个元素若设置了position: absolute|fixed;则该元素不能设置float，这是一个基本常识，因为这是两个不同的文档流，
一个是浮动流，另一个是定位流，但是relative却可以设置为float，因为relative遵循正常文档流，原来的空间依然占据文档流。
-->
<!--<div class="div1"></div>-->
<!--<div class="box2">-->
<!--<div class="div2">bb</div>-->
<!--</div>-->
<!--<div class="div3">aa</div>-->
<!--<div class="outer">-->
<!--<div class="menu1">菜单一</div>-->
<!--<div class="menu2">菜单二</div>-->
<!--<div class="menu3"></div>-->
<!--</div>-->
<!--<div class="bottom">bottom</div>-->
<!--<div class="div1"></div>-->
<!--<a class="a1">返回顶部</a>-->
</body>
</html>
标签：返回顶部 位置 oct static 布局 title oat html htm
原文地址：http://www.cnblogs.com/libisheng-20160828/p/6036440.html
