如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{

    width:200px;

    height:200px;

    border:2px red solid;

    position:relative;

    left:100px;

    top:50px;

}

<div id="div1"></div>

效果图：

什么叫做“偏移前的位置保留不动”呢？

大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：

<body>

    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>

</body>

效果图：

从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

层模型--相对定位(position:relative)的更多相关文章

  1. 层模型--绝对定位(position:absolute)

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接 ...

  2. 相对定位position: relative;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  4. CSS层模型

    参考:慕课网 点此可进 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)属性来支持层布局模型 ...

  5. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  6. day6 相对定位：position:relative

    相对定位:position:relative 特点:a.相对于自己原来位置的定位,以自己的左上角为基准. b.相对定位原来的位置仍然算位置,不会出现浮动现象. 以下为初始位置:(可以看出设置margi ...

  7. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  8. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  9. 有关CSS 定位中的盒装模型、position、z-index的学习心得

    开始整体之前我需要说明两个概念: 第一个就是   一切皆为框  也就是说在HTML中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流:  一个网页可以看作是 ...

随机推荐

  1. JVM参数配置大全

    前阵子遇到几个面试题都是关于对Java内存控制的,因此从网上找到这篇文章,希望自己对Java的内存分配有重新的认识 /usr/local/jdk/bin/java -Dresin.home=/usr/ ...

  2. Lua常用的数据结构表示

    1.矩阵 Lua中有两种表示矩阵的方法,一是“数组的数组”.也就是说,table的每个元素是另一个table.例如,可以使用下面代码创建一个n行m列的矩阵:mt = {}          -- cr ...

  3. Android MonkeyRunner自动拨打电话

    from com.android.monkeyrunner import MonkeyRunner, MonkeyDevice import time device = MonkeyRunner.wa ...

  4. HDOJ/HDU 1297 Children’s Queue(推导~大数)

    Problem Description There are many students in PHT School. One day, the headmaster whose name is Pig ...

  5. 选择排序（SelectSorted）

    //简单的选择排序public class SelectSorted { public static void main(String[] args) { int[] array={12,24,9,7 ...

  6. C# Dictionary的xml序列化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  7. Windows宿主机访问Ubuntu中mysql数据库笔记

    1.网络 既然要远程ubuntu的系统.那么首先是两个网络是不是在一个网段.能不能ping的通? a)  Windows电脑上--cmd 打开命令窗口.键入:ipconfig 命令.查看主机IP. b ...

  8. ng-select ng-options ng-repeat的用法与区别

    最近在用angularJS里的ng-select,ng-options,ng-repeat,发现有两点不太方便: 1.当数据复杂时,循环起来比较麻烦 2.首选项如果不设置,就会为空 整理一下它们的用法 ...

  9. 【转】javascript日期操作详解(脚本之家整理)

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们 ...

  10. 常用Dos命令笔记

    0x00 磁盘FAT32格式转NTFS convert e: /fs:ntfs Tips: 语法规则: Converts a FAT volume to NTFS. CONVERT volume /F ...