在网页制作的过程中, 经常会使用 position 来定位元素实现布局, 那么, 若想取消定位, 应该怎么操作呢? 下面本篇文章举例讲解 CSS 如何取消定位 position.
1, 新建一个 html 文件, 命名为 test.HTML, 用于讲解 CSS 如何清除定位 position.
2, 在 test.HTML 文件内, 使用 div 标签创建一个模块, 并设置其 class 为 con, 主要用于下面通过该 class 来设置 CSS 样式.
3, 在 test.HTML 文件内, 在 div 内, 再创建一个 div 模块, 并设置其 class 为 pos.
4, 在 CSS 标签内, 设置类名为 con 的 div 的样式, 使用 width 属性设置 div 的宽度为 300px, 使用 height 属性设置 div 的高度为 200px, 使用 background 属性设置 div 的背景颜色为红色, 定位属性 position 设置为相对定位 (relative).
5, 在 CSS 标签内, 设置类名为 pos 的 div 的样式, 使用 width 属性设置 div 的宽度为 100px, 使用 height 属性设置 div 的高度为 100px, 使用 background 属性设置 div 的背景颜色为粉红色, 定位属性 position 设置为绝对定位 (absolute), 同时, 使用 left 和 top 属性设置 div 距离左边 30px, 距离顶部 10px.
6, 在 CSS 标签内, 再创建一个类名为 clearpos 的样式, 将 position 属性设置为 static, 即清除定位属性, 凡是添加了该类名样式, 都会清除定位. 将此类名添加到 div 为 pos 的模块上, 清除它的定位.
7, 在浏览器打开 test.HTML 文件, 查看实现的效果.
总结:
1, 创建一个 test.HTML 文件.
2, 在文件内, 使用 div 创建两个模块, 两者是嵌套关系.
3, 在 CSS 标签内, 设置两个 div 的样式, 实现内层 div 相对于外层 div 偏移一定的距离, 然后再使用 "position:static" 来清除内层 div 的定位属性, 去除 div 的偏移.
注意事项:
"position: static" 清除定位同样适用于多级定位, 可以清除子元素的定位属性.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16728.html