css中相对定位和绝对定位的介绍与使用

零下一度
发布: 2017-07-20 13:21:43
原创
2395人浏览过

一、position的四个值:static、relative、absolute、fixed。

绝对定位:absolute和fixed统称为绝对定位

相对定位:relative

默认值:static

 

立即学习前端免费学习笔记(深入)”;

二、relative定位与absolute定位的区别

实例:

HTML代码:

css代码:

1.position:relative;如果对一个元素进行相对定位,首先它将出现在他所在的位置上。然后通过设置垂直或水平的位置,让这个元素“相对于”它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)例如#mybox{position:relativ;left:20px;top:20px;}效果就是使这个层乡下和向左移动了20px。

2.position:absolute;表示绝对定位,位置将依据浏览器左上角的0点开始计算,绝对定位使元素与文档流无关,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最先的包含块。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高,框在堆中的位置就越高。)
 
那么现在我们大家做的网页大部分都是居中的,那么我需要这个元素跟着网页中的某个元素位置不论分辨率时多少它的位置始终是针对页内的某个元素的,那么单纯的absolute是不行的。正确的解决方法就是在元素的父级元素定义为position:relative;(这里可以是祖父级,也可以是position:absolute;)需要绝对定位的元素设为position:absolute;这样再设定top,right,bottom,left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧。

以上就是css中相对定位和绝对定位的介绍与使用的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
css
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号