相对定位与绝对定位

1 CSSCSS 定位与定位应用定位与定位应用 定位一直是 WEB 标准应用中的难点 如果不清楚定位那么可能一些效果将不能实现 即使实现了某些效果 在浏览器的兼容性方面 可能也会出现问题 如果理清了定位的原理 那么定位会让网页实现的更加完美 在网页制作中 例如实现对联广告 这时候就需 要设置绝对定位 来实现如图 1 所示的效果 图 1 对联广告 一 position 的三种定位方式 图 1 演示了绝对定位的应用 position 定位属性主要包含 relative 相对定位 absolute 绝对定位和 static 默认定位三种定位方 式 下面分别对这三种定位方式进行讲解 1 relative 相对定位 相对于文档流原来位置的偏移 原占位大小完整保留 相对定位常用的属性 值及其含义如下表所示 定位属性定位属性属性属性值值说明说明 定位方式 positionposition relative 采用相对定位 相对于本来位置的偏移 leftleft 20px 距离参照物左侧 20px rightright 50px 距离参照物右侧 50px toptop 10px 距离参照物顶部 10px 相对定位参照物为元素的本来位置 偏移量 bottombottom 100px 距离参照物底部 100px 一般情况下 right 和 left 或 top 和 bottom 不应同时存在 他们之间有个公式 left 值等于 right 同样的 top 值等于 bottom 例如 left 10px 等价于 right 10px 我们根据上表中对 relative 知识的描述 来看图 2 中相对定位元素 第 2 块 的特点 2 图 2 相对定位 在图 2 中 第 2 块内容本应该在虚线范围内 但是它却移动了位置 主要是在图 2 页面的第 2 块中加入 position relative top 10px left 20px 代码 第 2 块实现了相对定位 并且左 上都有一定的偏移量 所以就呈现了如图 2 所示的效果 图 2 页面的关键代码如下所示 相对定位 div color fff font bold 22px 黑体 width 150px height 120px background red float left div2 height 150px background ff7300 position relative top 10px left 20px clear background blue 第 1 块 第 2 块 第 3 块 3 从上面的代码中可以知道 相对定位有如下 3 个特点 参照物 相对定位是相对于未设置定位方式前的位置 其参照物就是原来位置 偏移量 方式确定后 根据与参照物的具体偏移量来确定元素新位置 占位 相对定位偏移后的元素 其占有的位置是原来位置 其偏移后会覆盖并位于其他重叠元素 如 第 3 块 的上面 但不 会增加高度和宽度 2 absolute 绝对定位 完全脱离文档流 是相对于第一个非默认定位方式的上级元素的距离 相对定位的元素大小会在文档流原来位置占去相 同大小的页面空间 而绝对定位则不再占原文档流页面的任何空间 其常用属性语法语义与相对定位类似 例如 position absolute top 200px left 150px 定位方式的区别导致了参照物区别 具体参照物为上级元素中 第一个存在非 默认定位方式的元素 它完全脱离了文档流 下面图 2 页面中的代码进行修改 只修改样式 div2 修改为绝对定位 为方便参照 加大了偏移量 其他代码均没有任何变化 div2 修改后的代码如下所示 div2 height 150px background ff7300 position absolute top 180px left 200px 修改后在浏览器中运行的效果如图 3 所示 第 2 块风格改为绝对定位后 位置也发生了变化 并且不再占有原来的位置 图 3 绝对定位 4 学习完绝对定位 可以发现绝对定位也有 3 个特点 参照物 绝对定位参照物是第一个非默认定位方式的上级元素 如不存在则为整个页面 偏移量 方式确定后 根据与参照物的具体偏移量来确定元素新位置 占位 绝对定位偏移后的元素 不再占原来位置 其偏移后会覆盖并位于其他重叠元素 如 第 3 块 的上面 现在为三个 div 增加一个上级 div 并且设置上级 div 的相对定位为 relative 上外边距设置 50px 左边距设置为 60px 修改后 的页面代码如下所示 绝对定位 div1 color fff font bold 22px 黑体 width 150px height 120px background red float left div2 height 150px background ff7300 position absolute top 180px left 200px clear background blue div big position relative top 50px left 60px 第 1 块 第 2 块 第 3 块 修改完上面的代码后 在浏览器中运行的效果如图 4 所示 5 图 4 绝对定位及相对定位的应用 position 还有一种类似的定位方式为固定定位 值为 fixed 同样完全脱离文档流 但参照物为浏览器的可见范围 但只工作在 IE7 0 的 strict 模式下 这里稍微提下 3 static 静态无偏移 不填时默认属性 偏移量属性无效 属于常规文档流 虽然这个参数只有在 JavaScript 中实现某些效果时使用 但 必须理解 static 定位方式对应的常规文档流概念 在前面内容中 我们学习并不断涉及到文档流的概念 我们知道 它是页面内容的组织方式 即从上至下 先分行 然后每行根据 元素的特点放置元素 块级元素独占一行 行级元素从左至右排列 这种组织方式就是往容器中放置流体 流体即水 油等液体 特点是自动紧密排列填充容器 就好像往水缸倒水 而非流体则是无 此特点 如屋子里摆放各类家具 常规文档流中的 常规 是指除浮动和绝对定位外 网页显示元素的默认组织方式 相对于浮动与绝对定位的特殊情况 常规文 档流可以简单的描述为 原来位置 上面我们讲解了定位属性中的三种定位方式 其中相对定位与绝对定位 会与原文档流形成堆叠 覆盖在其他重叠位置元素的上面 那么 1 为什么相对或绝对定位元素会位于常规文档流前面呢 2 当有多个相对或绝对定位元素存在时 他们又应该如何排列顺序 要回答这些问题 必须理解并掌握叠放层次 z index 属性 二 叠放层次属性 z index 6 z index 属性只对非默认定位方式的元素 相对 绝对与固定定位 有效 默认值为 1 其值为正整数 值越大 叠放在越前面 其语法格式如 z index 2 在绝对定位效果图的例子中新增 1 个绝对定位的 div 并设置第 2 块叠放层次为 z index 2 修改后的代码如下所示 相对定位 div color fff font bold 22px 黑体 width 150px height 120px background red float left div2 height 150px background ff7300 position relative top 10px left 20px z index 2 clear background blue div4 position absolute top 100px left 100px background green 第 1 块 第 2 块 第 3 块 第 4 块 未设置 z index 在浏览器中运行上面的代码 效果如图 5 所示 7 图 5 叠放层次的应用 在图 5 中 可以很明显的看到 叠放属性是 z index 2 的第 2 块位于最上面 第 4 块其次 最底下是未设置绝对定位的文档流 第 4 块并未设置 z index 的值 但绝对定位的元素 其 z index 默认值为 1 我们再把上面代码略修改 把第 2 块的 z index 2 属性去掉 那么 它的 z index 值应该也是默认值 1 这时就出现 1 个问题 同层次如何确定叠放顺序呢 在浏览器中 运行修改后的代码 效果如图 6 所示 8 图 6 叠放层次后来者居上 从图 6 中我们很容易得出答案 同层间 按代码中出现顺序排 后出现的居上 因为叠放层次值 也可以理解为 2 在正常顺序中位于 1 后面 因此 可以很简单的把这些叠放层次的组织顺序总结为 后来者居上 1 叠放层次值有大小差异 大的居上 就像建房子 地基即文档流页面 楼层数越大则在越上面 2 同层间 后出现的居上 三 实例演示 学习完定位属性 特别是绝对定位及叠放层次 z index 属性后 就可以实现页面中常用到的带关闭按钮的对联广告效果 具体效果 如图 7 所示 9 图 7 带关闭按钮的对联广告 要实现上述效果 其实比较简单 1 在页面中放置 4 个元素并设置为绝对定位 2 设置关闭图片的叠放层次为 z index 2 3 根据效果图 确定 左边图的左边界 left 40px 右边图的右边界 left 40px 统一上边界 top 30px 理清思路后 实现上述效果的代码如下所示 带关闭按钮的对联广告 body margin 0px padding 0px advLeft advRight closeLeft closeRight position abso