小伙伴们学习了绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，

大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->

    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->

</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{

    width:200px;

    height:200px;

    position:relative;

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{

    position:absolute;

    top:20px;

    left:30px;

}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

示例:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>相对参照元素进行定位</title>

<style type="text/css">

div{border:2px red solid;}

h1{font-size:30px;}

#box3{

    position:relative;

    top:20px;

    left:30px;

    width:200px;

    height:200px;

}

#box4{

    position:absolute;/*只对最接近的并有定位属性的父元素有依赖*/

    width:99%;

    bottom:0px;

}

</style>

</head>

<body>

<h1>下面是演示部分</h1>

<div id="box3">

    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">

    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

</div>

</body>

</html>

效果:

Relative与Absolute组合使用的更多相关文章

  1. relative和absolute

    relative 相对定位 1. 幻影瞬移 absolute属性也有瞬移技能,不同之处在于:absolute属性以天空或其他外界限制计算瞬移位置:而relative属性由于是凡人肉体,偏移能力有限,只 ...

  2. 关于relative和absolute的总结

    对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...

  3. relative 和 absolute

    relative总是相对于其最近的父层 absolute总是相对于其最近的定义为relative或absolute的父层

  4. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  5. relative和absolute的效果

    我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...

  6. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  7. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

  8. position relative和absolute区别

    看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置  但 ...

  9. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

随机推荐

  1. HDU 4430 Yukari's Birthday (二分+枚举)

    题意:给定一个n(18 ≤ n ≤ 10^12),一个等比数列k + k^2 + .......+ k^r = n 或者 = n-1,求出最小的k*r,如果最小的不唯一,则取r更小的 分析:两个未知数 ...

  2. 移动大数据时代最IN编程语言必读书单

    移动大数据时代最IN编程语言必读书单 这是一个快速更迭,快鱼吃慢鱼的时代.从IT 时代演变成 DT 时代,再到现在的智能时代.急速革新的各种新技术.新工具.新平台,需要程序员掌握良好的编程思想和学习方 ...

  3. solr异常--Expected mime type application/octet-stream but got text/html.

    Exception in thread "main" org.apache.solr.client.solrj.impl.HttpSolrServer$RemoteSolrExce ...

  4. myeclipse如何修改Web项目名称

    1. 使用myeclipse进行Web项目开发时,有时候项目名称重命名了,但是WEB项目在tomcat里边的名称还是原来的名称,是需要重新命名的.下边详细介绍一下如果和修改web项目名称,myecli ...

  5. javascript:void到底是个什么？

    一般都是用作 实现 如下功能,当点击一个超链接的时候,不想出发超链接自带的动作,而触发自定义的js方法,一般与onclick 一起出现.如果不写void(0)点击超链接时候虽然调用js方法,但是也会出 ...

  6. 更改Tomcat startup.bat启动窗口名称

    通常在Tomcat bin目录下用startup.bat启动Tomcat ,启动窗口显示的Title是Tomcat 如果遇到一个服务器上多个Tomcat的话就会容易混淆.更改方法如下: 1 在bin目 ...

  7. 【Android - MD】之FloatingActionButton的使用

    FloatingActionButton(FAB) 是 Android 5.0 新特性--Material Design 中的一个控件,是一种悬浮的按钮. FloatingActionButton 是 ...

  8. 关于setLayoutParams报错

    有两个可能的原因  1.内部view没有用其parent的LayoutParams在继承BaseAdapter的时候,用getView返回View的时候,用代码控制布局,需要用到View.setLay ...

  9. leetcode第一刷_Validate Binary Search Tree

    有了上面的教训,这道题就简单多了,什么时候该更新pre是明白的了,倒是有个细节,二叉搜索树中是不同意有相等节点的,所以题目的要求用黑体字标明了.写的时候注意就能够了. class Solution { ...

  10. C程序内存管理

    C程序的内存管理 熟悉Java语言的肯定知道,Java中内存管理是由虚拟机帮助我们完毕的,在C/C++中可不是这样,程序猿须要自己去分配和回收内存空间.本文记录了C程序可运行文件的存储结构.在内存中的 ...