关于css中定位的总结

作者 : OO资源中心 发布时间: 2020-05-10 文章热度:231 共1066个字,阅读需3分钟。 本文内容有更新 字体:

关于css中定位的总结-OO.INK资源网

下面主要为大家介绍一下三种常见的定位。

1、position:relative(相对定位)

相对定位就是相对于原来自己的位置做出对应的变化,。

需要注意的是:元素移动后会占有原来的位置(这是relative定位最为重要的一点)

(视频教程推荐:css视频教程

代码:


运行结果如下:

关于css中定位的总结-OO.INK资源网

当给子盒子如下定位属性时:

 .purple {
            position: relative;
            top: 0;
            left: 80px;
            /* 上面给这个盒子添加了相对定位,
            并让它相对原来的自己移动了80px的距离 */
            width: 80px;
            height: 80px;
            background-color: purple;
        }

如图:

关于css中定位的总结-OO.INK资源网

页面变成了这样,这也验证了最重要的一点:元素移动后会占有原来的位置,否则绿色的盒子就会顶上去。

2、ponsition:absolute(绝对定位)

绝对定位是以自己父级元素做出的位置改变,如果父级元素有position属性,以父级元素为基准做出相应的移动;如果父级元素没有position属性(或者没有父级元素),以浏览器为基准做出相应的移动。

需要注意的是:元素移动后不会占有原来的位置。

代码:

.purple {
            position: absolute;
            top: 160;
            left: 80px;
            /* 这里的紫色盒子没有父级元素
            所以是以浏览器为基准的定位 */
            width: 80px;
            height: 80px;
            background-color: purple;
        }

如图:

关于css中定位的总结-OO.INK资源网

显然绿色盒子顶了上去,这个结果就验证了绝对定位:元素移动后不会占有原来的位置。

3、fixed(固定定位)

固定定位的位置是相对于整个页面的位置,与是否有父级元素无关,同样,固定定位也不会保留位置。

相关推荐: 解决jquery版本冲突的有效方法

用过jQuery的朋友都知道jQuery不同版本会引发冲突,本文就此问题提出有效的解决方案如下: 案例:解决jQuery1.3.2和1.4.2的冲突。(本例已测试通过!) 第一步:在1.4.2的源代码的最后加上一句 : var $j4 = jQuery.noC…


关注微信公众号『OOINK』

第一时间了解最新资源动态关注OO.INK不迷路~

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
下载资源需要解压密码,解压密码是什么?
如下载的资源需要解压密码,请查看下载页右侧查找解压密码;
如没有解压密码请尝试默认解压密码:www.oo.ink 或者 oo.ink
或者联系我们获取解压密码!
1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2、分享目的仅供大家学习和交流,请不要用于商业用途!
3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4、如有链接无法下载、失效或广告,请联系管理员处理!
5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

OO.INK资源网 » 关于css中定位的总结
+已在风雨中度过
为兴趣而改变,为梦想而努力!
+已坚持更新
时时更新,确保最新~

开通SVIP,畅享全站资源下载~

立即了解