CSS核心(四十)元素标签定位方式之相对定位 position:relative

[复制链接]
查看: 1034|回复: 31
发表于 2023-2-1 14:54:27 | 显示全部楼层 | 阅读模式
定位是CSS中最为重要的知识点,使用定位可以将选中的元素摆放到页面中的任意位置,定位一般会和偏移属性left、right、top、bottom共同使用。
定位方式分为四种:
1、static静态定位(没用)。
2、relative相对定位。
3、absolute绝对定位。
4、fixed固定定位。

本文先来讲解relative相对定位,下面看代码:
相对定位是相对自身的,也就是说,相对于被定位元素的原始位置。

先看没有使用定位的原始状态

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素标签定位方式之相对定位 position:relative</title>
</head>
<style>
        .box{
                width:200px;
                height:200px;
                background:#f00;
        }
</style>
<body>
<div class="box"></div>
这是盒子底下的文字
</body>
</html>


显示结果如下:

CSS核心(四十)元素标签定位方式之相对定位 position:relative

解释一下:
html代码中有一个div,div的下面有一行文字,在正常情况下文字应该显示在div的下方,因为div为块标签,独占一行。

使用了定位以后变成了这样

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素标签定位方式之相对定位 position:relative</title>
</head>
<style>
        .box{
                width:200px;
                height:200px;
                background:#f00;
                /* 相对定位 */
                position:relative;
                /* 设置偏移 */
                /*margin-left:200px;*/
                top:50px;
                left:50px;
                /*
                相对定位总结:
                        1.参考自身在标准流中的位置进行偏移
                        2.可以覆盖别的元素
                        3.在标准流还占有空间(灵魂出窍)
                */
        }
</style>
<body>
<div class="box"></div>
这是盒子底下的文字
</body>
</html>


显示结果如下:

CSS核心(四十)元素标签定位方式之相对定位 position:relative


解释一下:
使用了position:relative;后,div便脱离了标准流,但相对定位的脱离标准流和浮动float不同,被定位的元素依然占有原来的空间。
然后我们使用偏移属性top将div向下移动了50像素,又向右移动了50像素,结果是:div覆盖了文字。

总结:
相对定位属性为position:relative;,它是相对自己定位的,给元素设置定位属性后,通过上下左右的偏移属性来控制元素的偏移距离,元素偏移后依然占用原始位置,可以覆盖其它元素。
易博软件介绍
发表于 2023-2-18 09:22:52 | 显示全部楼层
收益匪浅  感触颇深  十分感谢你发的文章~~

0

主题

12

帖子

6

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
6
发表于 2023-2-25 01:27:04 | 显示全部楼层
很有感悟 好文章

0

主题

10

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-2-28 18:54:04 | 显示全部楼层
非常感谢你,是你给了在一个在迷茫中的人一个指南针!!!!!
发表于 2023-3-8 09:52:46 | 显示全部楼层
太精辟了,谢谢

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-3-13 23:45:14 | 显示全部楼层
很好,感觉现在在学校的计算机课太没质量了!!我是新手,希望多点交流啊

5

主题

215

帖子

115

积分

营销菜鸟

Rank: 3Rank: 3

积分
115
发表于 2023-3-19 06:38:24 | 显示全部楼层
让暴风雨来的更猛烈些!努力!

2

主题

160

帖子

84

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
84

终身会员

发表于 2023-3-24 14:26:56 | 显示全部楼层
很感谢楼主的分享,都是很有意义经验  

0

主题

11

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-3-28 18:08:42 | 显示全部楼层
很受启发!  谢谢!  
发表于 2023-3-31 20:52:45 | 显示全部楼层
很是感慨!!!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表