湘潭商城网站建设定制做网站流程 优帮云
可通过position属性设置布局方式
一、标准流布局
对应的position属性为：static
-
从左到右，从上到下
-
互相直接不存在层叠情况
-
含inline的在一行依次排布，直到遇见block，让他独占一行
<span>111</span>
<img src="../images/sun.png">
<div>222</div>
<strong>333</strong>
<span>444</span>
二、相对定位
占据标准流空间，只是相对原位置改变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{position: relative;background: rosybrown;width: 300px;height: 300px;left: 100px;/*相对原位置距左边100px*/top: 100px;/*相对原位置距上面100px*/}</style>
</head>
<body><div class="box">hhh</div><div>666</div>
</body>
</html>
三、固定定位
不占据标准流空间，相对原位置改变
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.a{width: 300px;height: 300px;background-color: wheat;}.f{position: fixed;top: 0;}</style>
</head>
<body><div class="f">啦啦啦</div><div class="a"></div>
</body>
</html>
