如果想为元素设置层模型中的相对定位，需要设置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. [置顶] linux内核启动2-setup_arch中的内存初始化（目前分析高端内存）

    上一篇微博留下了这几个函数,现在我们来分析它们         sanity_check_meminfo();         arm_memblock_init(&meminfo, mdes ...

  2. 优雅的让Fragment监听返回键

    转载请注明出处:http://write.blog.csdn.net/postedit/40507387 Activity可以很容易的得到物理返回键的监听事件,而Fragment却不能.假设Fragm ...

  3. Node.js权威指南 (9) - 进程与子进程

    9.1 Node.js中的进程 / 225 9.1.1 进程对象的属性 / 225 9.1.2 进程对象的方法与事件 / 2279.2 创建多进程应用程序 / 235 9.2.1 使用spawn方法开 ...

  4. 【转】Linux命令之查看文件占用空间大小-du,df

    原文网址:http://blog.csdn.net/wangjunjun2008/article/details/19840671 du(disk usage),顾名思义,查看目录/文件占用空间大小 ...

  5. HDU-2522 A simple problem

    http://acm.hdu.edu.cn/showproblem.php?pid=2522 学习://除数的运算的应用和算法.除法的本质,如果余数出现重复就表示有循环节 A simple probl ...

  6. 游戏开发设计模式之子类沙盒模式（unity3d 示例实现）

    积累提供所有操作(的实现)来定义子类的行为用一个最简单的例子来讲解这个模式玩家操纵的英雄也就是这个游戏的主角会有许多技能,我们想定义许多不同的技能,来让玩家使用.首 先我们定义一个skillBase类 ...

  7. 逆转字符串leetcode

    public class Solution { public String reverseWords(String s) { String ans=reverse(s); String s2[]=an ...

  8. C++之友元函数

    1.为什么要引入友元函数:在实现类之间数据共享时,减少系统开销,提高效率 具体来说:为了使其他类的成员函数直接访问该类的私有变量 即:允许外面的类或函数去访问类的私有变量和保护变量,从而使两个类共享同 ...

  9. tomacat 配置ssl协议

    1.首先用jdk自带的工具keytool生成一个"服务器证书" a.命令行进入$JAVA_HOME/bin目录($JAVA_HOME为jdk的安装目录) b.输入:keytool ...

  10. java基础学习(一)

    去年10月份从学校出来实习,从事javaWeb方面的开发.到现在已经快1年了.突然间感觉自己的java基础知识忘记的很厉害,或者说知识掌握的不牢吧.回顾自己学习java,发现我竟然一本关于java基础 ...