文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS定位之相对定位

敲键小勇士

敲键小勇士

2024-04-23 23:10

关注

       在之前的课程学习中,我们对定位有了初步的认识,了解了块框、行内框、行框等相关内容。今天小编和大家一起来探讨一下相对定位!

  一、什么是相对定位

  相对定位(relative):依据left,right,top,bottom等属性在正常文档流中偏移自身位置,它原本所占的空间仍保留。

  二、相对定位的相关应用

  如果对一个元素进行相对定位:元素首先在它正常的位置上出现。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

  例如:

  #box_relative{

  position:relative;

  left:30px;

  top:20px;

  }

   如果将top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方,left设置为30像素,那么元素会向右移动30像素。

  如下图所示

CSS定位之相对定位_CSS_相对定位_CSS理论_编程学习网

  注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

  为了加深大家对相对定位的理解,下面以元素为例给大家介绍一下如何相对于一个元素的正常位置来对其定位。

  实例

如何相对于一个元素的正常位置来对其定位代码

  运行结果

代码运行结果

  相对定位是一个非常容易掌握的概念,通过本课程的学习相信大家对相对定位有了一定的认识。学习一门新知识需要毅力,在这里祝大家早日学有所成之余,也希望大家继续关注我们编程学习网网站关于css的其他课程喔!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯