MiaoMiao'S Dev Life
  • 首页
  • 技术专栏
首页 / 随笔 / CSS相对定位

CSS相对定位

随笔 • 9 years ago

相对定位:从这个名字我们就可以知道,这是一种相对某个元素定位的一个方法。

那么,我们到底是相对哪个元素来定位的呢?

其实这个元素不是其他元素,而是这个元素本身,即应用相对定位方法的这个元素。

下面我们来看一段代码:

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

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

未应用定位前:1

相对定位后:

从上图中我们可以看出应用了相对定位的元素,相对于其本身的位置向下移动了20px(top:20px),向左移动了50px(left:50px)。另外我们可以看到其后面的元素并没有占据它的位置,我们可以知道,它仍在标准流中占据原来的位置。

现在让我们总结一下相对定位的几个特点:

  • 1.使用了相对定位元素的元素,其参照物是其本身,其偏移量由TRBL(top,right,bottom,left)的值确定。
  • 2.使用了相对定位的元素,仍然会在标准流中占据原来的位置,它对父元素和兄弟元素没有影响。
  • 3.相对定位的使用场景往往是作为绝对定位元素的参照物。
css
Like (0)
Comments (0)
Back
Leave a comment
Related Posts
new Array(1) 和 [undefined] 一样嘛?
一 问题描述 最近在开发中碰到一个很奇怪的问题,请看下面代码 const newArr = new Array(3).map((item) => { return item = { name: ‘Chris xiong’ } }) console.log(newArr) 大家觉得这段代码的输出结 ...
7 years ago
初探模块系统02—如何让模块支持AMD/CMD和commonjs标准
前段时间在看一些前端模块化方面的知识,现在自己就来写一个符合amd/cmd 和commonjs标准的模块。在文中会穿插一些AMD/CMD,commonjs的基础知识,主要是为了让自己复习一下。了解的同学们可以直接略过。 一 原模块 该模块是一个实现类数组转为数组功能的模块 (function(arrayLike){ ...
7 years ago
初探flex布局
一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型,在flex布局模型中,弹性容器的子元素的排布可以比较灵活,可以根据容器的大小自动扩展或收缩其大小。也可以比较灵活的处于容器的的某一位置上。所以flex的应用场景很多,比如我们碰到需要元素居中的应用场景时,flex布局就变得很有用了。更多关于f ...
8 years ago
© 2016-2025 All Rights Reserved⋅Developed by nicetheme⋅浙ICP备19034990号
  • 首页
  • 技术专栏
Search (0)
    Load more...
    Tags
    css docker es6 git html js typescript vue 动态表单 整洁架构