如果想为元素设置层模型中的相对定位，需要设置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. wcf中 生成x5.09证书的工具

    原文链接http://blog.pluralsight.com/selfcert-create-a-self-signed-certificate-interactively-gui-or-progr ...

  2. Light OJ 1031 - Easy Game（区间DP）

    题目大意: 给你一个n,代表n个数字,现在有两个选手,选手A,B轮流有有一次机会,每个选手一次可以得到一个或者多个数字,从左侧或者右侧,但是不能同时从两边取数字,当所有的数字被取完,那么游戏结束.然后 ...

  3. 【转】linux(Ubuntu)配置svn仓库,搭建svn服务器

    原文网址:http://blog.1v2d.com/322.html 在家里搞了好久,终于搞出来,并且在线上已经成功搭建成功,在这感谢一个博主的文章,本篇文章也主要是转载他的内容,写的非常好,而且非常 ...

  4. apple ID的重要性

    当手机丢失时,您可以将对应的产品码提供给运营商,提高找回丢失手机的可能性.         2.去App store下载“查找我的iPhone(Find My iPhone)”,立刻安上,用你的app ...

  5. HDU-2188 悼念512汶川大地震遇难同胞——选拔志愿者

    http://acm.hdu.edu.cn/showproblem.php?pid=2188 巴什博奕(Bash Game)的转换:换一种说法而已 悼念512汶川大地震遇难同胞——选拔志愿者 Time ...

  6. Axure初体验:简单交互、通过按钮切换图片

    前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

  7. Java编程-第一个Java程序

    Java编程用到的IDE是Eclipse. 关于第一个Java程序实现的简单流程: (1)    下载eclipse (2)    File-New-Java Project 命名工程名字:Hello ...

  8. hdu 2546 典型01背包

    分析:每种菜仅仅可以购买一次,但是低于5元不可消费,求剩余金额的最小值问题..其实也就是最接近5元(>=5)时, 购买还没有买过的蔡中最大值问题,当然还有一些临界情况 1.当余额充足时,可以随意 ...

  9. 实现自己的脚本语言ngscript之零

    正式开始介绍前先扯点没用的. 从小玩basic长大的小朋友大多有一个梦想,就是自己实现一个basic解释器. 不过这里我实现的不是basic,而是一个语法和功能类似javascript的东西. 暂且称 ...

  10. Parallel.Foreach的并发问题解决方法-比如爬虫WebClient

    场景五:线程局部变量 Parallel.ForEach 提供了一个线程局部变量的重载,定义如下: public static ParallelLoopResult ForEach<TSource ...