CSS定位综合实例

来源：互联网发布：淘宝允许好评返现吗编辑：程序博客网时间：2024/05/18 01:12

CSS定位：position是盒子模型中一个重要的概念。Position有4个属性值：static（静态，无定位），relative（相对定位），absolute（绝对定位），fixed（固定定位）。

下面通过一个例子讲述4个属性值的区别：

1. CSS定位实例：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>css的定位：position</title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 400px;height: 800px;margin-left: 20px;border: 10px inset #f0ff00;   /* 边框凹陷 */background-color: #eee;}#abs1,#abs2,#abs3,#abs4,#abs5 {    /* 绝对定位div */width: 120px;height: 50px;border: 5px double #000;position: absolute;}#abs1 {top: 10px;left: 10px;background-color: #9c9;}#abs2 {top: 20px;left: 50px;background-color: #9cc;}              /* div2在div1上面，因为div2比div1先定义 */#abs3 {bottom: 10px;left: 50px;background-color: #9cc;}#abs4 {top: 10px;right: 50px;z-index: 9;background-color: #9cc;}#abs5 {top: 20px;right: 90px;z-index: 10;    /* div5在div4上面，因为z-index的值比div4的大 */background-color: #9c9;}#fix {                     /* 固定定位div */width: 100px;height: 100px;border: 15px outset #f0ff00;    /* 边框凸起 */background-color: #9c9000;position: fixed;top: 100px;left: 160px;}#rel {         /* 相对定位div */width: 100px;height: 100px;border: 5px dashed #0ff;position: relative;top: 25px;left: 390px;}#a,#b,#c {        /* 无定位 */width: 300px;height: 100px;border: 1px solid #000;background-color: #ccc;}</style></head><body><div id="wrap"><div id="abs1">第1个绝对定位的div容器</div><div id="abs2">第2个绝对定位的div容器</div><div id="abs3">第3个绝对定位的div容器</div><div id="abs4">第4个绝对定位的div容器</div><div id="abs5">第5个绝对定位的div容器</div><div id="fix">固定定位的div容器</div>   <!-- 绝对定位和固定定位区别：固定定位的位置不会随滚动条而改变 --><div id="a">第1个无定位的div容器</div><div id="rel">相对定位的div容器</div>   <!-- 相对原来出现的位置，并没有脱离父容器all --><div id="b">第2个无定位的div容器</div><div id="c">第3个无定位的div容器</div></div></body></html>

2. 定位的效果：

1 0