我们都知道absolute是绝对定位,relative是相对定位。相应的用position属性来进行设置。但是这个绝对与相对是什么意思呢?绝对是哪里的绝对,相对又是相对于什么地方相对?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧下面我们就来解读。关于position属性可以参考这里。Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合top、right、bottom、left(下面简称trbl)进行定位,在没有设定trbl的情况下,默认依据父级的坐标原始点为原始点。如果设定trbl并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由trbl决定。我们看下面的图片:一般来讲,网页居中的话用Absolute绝对定位就非常容易出错,因为浏览器窗口一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别。Relative,CSS中的写法是:position:relative;他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以body的原始点为原始点,配合trbl进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。我们看下面的图片:有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。这种属性设置是css下拉菜单中尤为常见。
absolute与relative如何区分 怎么用?
来源:互联网 发布日期:2016-03-25 16:21:41 浏览:1548次
相关内容
AiLab云推荐
最新资讯
- 马斯克:可能在明年年底前出售特斯拉人形机器人 Optimus
- 苹果中国工厂回收机器人首次露面,规避了哪些电子回收弊端?
- 特斯拉或将在2025年底前销售人形机器人Optimus,机器人100ETF(159530)一度涨超1%
- 马斯克:“擎天柱”机器人仍在试验阶段 最早明年年底上市
- 马斯克称最快明年底前开卖人形机器人Optimus!网友:真能那么快吗?
- 外媒:马斯克透露,“擎天柱”机器人仍在试验阶段,最早明年年底上市
- 投资300亿!机器人产业爆发:几大趋势
- 人形机器人公司星动纪元携手临港集团,其“小星家族”获姚期智点赞
- 因会产生烧焦气味,日本世嘉玩具公司召回猫咪机器人
- AI Pioneers|星海图高继扬:人形机器人不是具身智能的唯一答案
本月热点
- 人形机器人崛起:OpenAI、微软洽谈投资Figure AI,望募资5亿美元
- OpenAI 悄悄升级 ChatGPT:可在对话中调用不同的自定义聊天机器人 | 懂点AI
- 麒麟信安入股超能机器人 或尝试打开新业绩增长点?公司最新回应来了
- Limbic开发AI心理咨询机器人,帮用户避免与人类交流可能引发的焦虑感
- 灿瑞科技:已有产品应用于消费级机器人领域
- 英伟达官宣AI聊天机器人,本地RTX显卡运行,这是要挑战OpenAI?
- 人形机器人企业暂时得救了
- Meta联合研发家务机器人,能在零人力帮助下自主整理房间
- 端到端纯视觉!OpenAI押注的人形机器人献艺拜年了
- 波士顿动力 Atlas 机器人能力升级,可灵活搬运汽车零件
热门排行
-
斯坦福家政机器人火了但又翻车了!多数是真人操控编排的
阅读量:165342
-
斯坦福团队发布新机器人Mobile Aloha,人形机器人将迎来产业元年?
阅读量:163010
-
我的同事是 GPT-4 机器人,我们在 Slack 上一起工作
阅读量:159435
-
谷歌起草“机器人宪法”,以确保 AI 机器人不会伤害人类
阅读量:157575
-
人形机器人崛起:OpenAI、微软洽谈投资Figure AI,望募资5亿美元
阅读量:101736
-
大疆回应停售青少年教育产品:将资源聚焦在大学生高校机器人赛事
阅读量:65393
推荐内容
- 2024年香港礼品及赠品展览会
- 2024第26届山东国际水展
- 2024第七届中国(昆明)南亚社会公共安全科技博览会
- 2024第二十六届山东国际供热供暖、暖炉及空调技术与设备展览会(JINNOC国际供热展)
- 2024中国昆山第二十四届国际机床及智能装备展览会
- 2024晋冀鲁豫国际门窗幕墙展览会
- 2024第10届深圳国际IP授权产业博览会(CIPE)
- 2024深圳国际文创新品展
- 2024厦门日化产品技术供应链博览会-打造东南国际市场新坐标!
- 2024CXBE厦门美妆供应链博览会
- 2024第19届潍坊春季茶业博览会暨紫砂展
- 2024长春第十八届连锁加盟创业项目展览会暨2024 东北长春餐博会暨首届预制菜展览会
- 海名·2024第九届西安餐饮供应链博览会
- 2024第三十二届中国(深圳)国际礼品及家居用品展览会(深圳礼品展)
- 2024第二十届中国(上海)国际医疗旅游展览会
- 2024年科隆东盟少儿用品展览会 (Kind+Jugen ASEAN 2024)
- 2024中国(太原)国际锂电池技术设备展览会
- 2024年法国巴黎国际工程机械展
- 2024年俄罗斯第23届国际石油和天然气工业设备及技术展览会
- 第四届中国国际数字产品博览会