当前位置: 首页 > news >正文

CSS相对定位

1.相对定位

相对定位:从这个名字我们就可以知道,这是一种相对某个元素定位的一个方法。
那么,我们到底是相对哪个元素来定位的呢?
其实这个元素不是其他元素,而是这个元素本身,即应用相对定位方法的这个元素。

下面我们来看一段代码:

.bottom{position:relative;
      top:20px;
      left:50px;}

这段代码设置了类名为bottom的元素相对定位。下面来看一下效果。

未应用定位前:clipboard.png

相对定位后:clipboard.png

从上图中我们可以看出应用了相对定位的元素,相对于其本身的位置向下移动了20px(top:20px),向左移动了50px(left:50px)。另外我们可以看到其后面的元素并没有占据它的位置,我们可以知道,它仍在标准流中占据原来的位置。
现在让我们总结一下相对定位的几个特点:
1.使用了相对定位元素的元素,其参照物是其本身,其偏移量由TRBL(top,right,bottom,left)的值确定。
2.使用了相对定位的元素,仍然会在标准流中占据原来的位置,它对父元素和兄弟元素没有影响。
3.相对定位的使用场景往往是作为绝对定位元素的参照物。

相关文章:

  • SpringBoot的基础Pom
  • Android InputStream转Bitmap
  • iOS开发之网络数据解析(二)--XML解析简介
  • python from-import语句用法
  • 学习GDB(二)
  • 【C++】模版的概念、使用方法和深入了解
  • Ajax:拥抱JSON,让XML走开
  • Intellij IDEA 根据数据库自动生成pojo和hbm
  • Storm的2种运行模式
  • GridView创建菜单栏
  • 问题-某个程序改了ICO图标后编译后还是显示老图标?
  • 自动生成小学四则运算题目的程序
  • Android视频直播解决方案(rstp、udp)
  • js实现touch移动触屏滑动事件
  • 7、JavaScript 知识总结
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • 【前端学习】-粗谈选择器
  • 002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript
  • canvas 绘制双线技巧
  • golang中接口赋值与方法集
  • Just for fun——迅速写完快速排序
  • laravel5.5 视图共享数据
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Redash本地开发环境搭建
  • spring boot下thymeleaf全局静态变量配置
  • WebSocket使用
  • 阿里云前端周刊 - 第 26 期
  • 给第三方使用接口的 URL 签名实现
  • 精彩代码 vue.js
  • 前端设计模式
  • 我的业余项目总结
  • #NOIP 2014# day.2 T2 寻找道路
  • (12)Linux 常见的三种进程状态
  • (7)STL算法之交换赋值
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (day6) 319. 灯泡开关
  • (NSDate) 时间 (time )比较
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • (译) 函数式 JS #1:简介
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .net core Swagger 过滤部分Api
  • .net 设置默认首页
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .sh文件怎么运行_创建优化的Go镜像文件以及踩过的坑
  • @JsonFormat与@DateTimeFormat注解的使用
  • [ C++ ] template 模板进阶 (特化,分离编译)
  • [ JavaScript ] JSON方法
  • [Android]Tool-Systrace
  • [BZOJ1010] [HNOI2008] 玩具装箱toy (斜率优化)
  • [C++]模板与STL简介
  • [C++]拼图游戏
  • [CDOJ 1343] 卿学姐失恋了
  • [codevs 1288] 埃及分数 [IDdfs 迭代加深搜索 ]
  • [echarts] y轴不显示0