CSS absolute与relative不得不说的故事
写在开篇：
absolute说：“relative，我这辈子都不想看见你！”
为什么呢？它们明明那么相亲相爱，形影不离，这之中到底发生了什么不为人知的故事，竟然让absolute如此讨厌relative？
要想找到问题的答案，请跟我来。。。
relative对absolute的限制之一
absolute，拥有top、right、bottom、left四项技能，从此天高任鸟飞，海阔任鱼跃；本来想去哪儿就去哪儿，自由自在，生活是那么地美好。
直到有一天，在出去玩的路上，遇到一个relative，跳出来大喊一声；“此山是我开，此树是我栽，要从此路过，留下买路财！”
然后，我们可爱哒absolute小朋友就乖乖地屈服了。
但是无良的relative收到好处居然还不放行，死活不让absolute过去。。。额，这个故事就是这样子的。。。相信大家都懂的。。。
额，还是写个demo吧，看这里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relative对absolute的限制1</title>
<style>
.box {
width:500px;
height:250px;
background-color: pink;
margin:30px auto 30px;
line-height: 250px;
text-align:center;
} .box p {
display: inline-block;
vertical-align: middle;
width:300px;
font-size: 16px;
line-height: 1.5;
text-align: left;
} p.middle {
width: 500px;
margin: 0 auto;
} .box2 p {
margin-left: 30px;
} .box img {
vertical-align: middle;
transition:left 2s,top 2s;
} .box img:active {
position: absolute;
left:0;
top:0;
} .box2 {
position: relative;
} </style>
</head>
<body>
<div class="box box1">
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>今天，absolute小朋友出去玩啦，开启left:0; top:0; 这个组合技能，一切顺利，到达了天边。</p>
</div>
<p class="middle">友情提示：请鼠标点击absolute小朋友，看看会发生什么。。。</p>
<div class="box box2">
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>今天，absolute小朋友又出去玩啦，同样开启left:0; top:0; 这个组合技能，但是天公不作美，出门就碰到relative这个坏家伙，于是止步于relative的地方。</p>
</div>
</body>
</html>
relative对absolute的限制之二
上回说到，absolute小朋友用top、right、bottom、left四项技能出去玩的时候被relative半路给截住了。
这次absolute小伙伴吸取了教训，不用那四项技能了，用margin负值技能，一样能跑出去玩。
很好，虽然房子周围有overflow:hidden的魔法结界，但是我们的absolute小朋友直接无视之，从容通过，大家鼓掌！！！
但是，但是，但是那个无良的relative又来啦。
还好，还好，还好这次的是margin负值技能，absolute小朋友成功突破了relative的限制，跑出去啦。。。
额，好像有什么不对。。。
我跑出去那部分身体怎么不见啦？
demo在这里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relative对absolute的限制2</title>
<style>
.box {
width:500px;
height: 350px;
line-height: 350px;
background-color: pink;
margin:50px auto 50px;
overflow: hidden;
text-align: center;
} .box p {
display: inline-block;
vertical-align: middle;
width:300px;
font-size: 16px;
line-height: 2;
text-align: left;
} p.middle {
width: 500px;
margin: 0 auto;
} .box img {
border: 1px solid black;
vertical-align: middle;
transition:margin-left 2s,margin-top 2s;
} .box img:active {
position: absolute;
margin-left:-120px;
margin-top: -45px;
} .box2 {
position: relative;
} </style>
</head>
<body>
<div class="box box1">
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>今天，absolute小朋友出去玩啦。<br />
鉴于上次用top、right、bottom、left技能的时候遇到了relative，导致出不去的尴尬，今天用的是margin负值技能。<br />
虽然房子周围设置了overflow:hidden，但这位强大的小朋友依然跑出去啦。</p>
</div>
<p class="middle">友情提示，请鼠标点击absolute小伙伴，看看会发生什么。。。</p>
<div class="box box2">
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>今天，absolute小朋友又出去玩啦，同样用的是margin负值技能。<br />
房子周围也是设置了overflow:hidden属性的，但是这位强大的小朋友依然跑出去啦。<br />
咦，什么情况，我房子外边的那部分身体呢？<br />
我擦嘞，relative你什么时候来的？</p>
</div>
</body>
</html>
经过这两次事件，absolute小朋友就开始讨厌relative小伙伴了，用一句耳熟能详的话来说就是，“我再也不想看见你啦”！
请给absolute自由
absolute小朋友天生就会飞，使用top、right、bottom、left想去哪儿就去哪儿。
absolute小朋友还会margin负值精确定位，想怎么玩就怎么玩。
absolute小朋友那么可爱，不信你看：
这么Q，这么萌，为什么要被限制住呢，宝宝向往天空和自由啊！啊！啊！啊！啊！
absolute说：“relative，我再也不想看见你了！”
但是，理想很丰满，现实很骨感。。。
absolute是不可能得偿所愿的，在定位的时候，或多或少都会使用relative来限制absolute，毕竟absolute实在太会飞了，不限制不行的啊。
不过，限制归限制，这只是relative和absolute两个人的恩怨，千万不要影响到其它花花草草。
所以，我们在使用relative+absolute定位的时候，要遵循relative影响最小化原则。
来个例子，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relative影响最小化</title>
<style>
* {
margin:0;
} .wraper {
width:800px;
margin:50px auto;
background-color: #ccc;
border: 3px solid green;
} .box {
width:500px;
margin:50px auto;
background-color: orange;
border: 3px solid black;
} img {
border:1px solid blue;
margin:10px;
} p {
padding-left:10px;
margin:10px;
} .absolute {
position: absolute;
} .box2 .absolute {
margin-left: -3px;
margin-top: -3px;
} .box3 .absolute {
margin-top:-3px;
margin-left:450px;
} .box4 .relative {
position: relative;
border:2px solid red;
} .box4 .absolute {
top:-10px;
right:-10px;
}
</style>
</head>
<body>
<div class="wraper">
<div class="box box1">
<img src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>这是没有任何定位，正常流的样子。</p>
<p>后续。。。</p>
</div>
</div><!--关闭wraper-->
<div class="wraper">
<div class="box box2">
<img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>如果我们要将图像定位到黑色边框的左上角，应该怎么办？</p>
<p>很简单，绝对定位，不加任何偏移量，用margin微调，完成！</p>
</div>
</div><!--关闭wraper-->
<div class="wraper">
<div class="box box3">
<img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>如果我们要将图像定位到黑色边框的右上角，应该怎么办？</p>
<p>第一种方法，像刚才那样，直接绝对定位，再用margin调整；
这种方法需要消耗一点脑细胞，算一算到底应该位移多少像素。</p>
</div>
</div><!--关闭wraper-->
<div class="wraper">
<div class="box box4">
<div class="relative">
<img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />
</div>
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
<p>第二种方法，就是大家喜闻乐见的relative+absolute定位啦。</p>
<p>不过，看在absolute那么讨厌relative的面子上，relative就只欺负它一个就好了，千千万万不要影响到其它花花草草。</p>
<p>具体来说，给这个需要定位的图像外加一层div，设置relative，让这个relative只影响需要绝对定位的元素。</p>
<p>relative影响最小化！</p>
</div>
</div><!--关闭wraper-->
</body>
</html>
CSS absolute与relative不得不说的故事的更多相关文章
- css absolute与relative的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Div CSS absolute与relative的区别小结
absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...
- css absolute和float，relative，z-index的同异
大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- 详细讲解CSS中相对定位relative和绝对定位absolute
很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...
- 怕忘记了CSS中position的absolute和relative用法
CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...
- Position属性四个值：static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- css中position:relative的真正理解
其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...
随机推荐
- PAT甲题题解1098. Insertion or Heap Sort (25)-（插入排序和堆排序）
题目就是给两个序列,第一个是排序前的,第二个是排序中的,判断它是采用插入排序还是堆排序,并且输出下一次操作后的序列. 插入排序的特点就是,前面是从小到大排列的,后面就与原序列相同. 堆排序的特点就是, ...
- 20181204-4 互评Final版本
此次作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2478 互评 一.互评Final版本——杨老师粉丝群<PinBall ...
- java实验报告二
一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计模式 二.实验步骤 (一)单元 ...
- 《Linux内核设计与实现》Chapter 5 读书笔记
<Linux内核设计与实现>Chapter 5 读书笔记 在现代操作系统中,内核提供了用户进程与内核进行交互的一组接口,这些接口的作用是: 使应用程序受限地访问硬件设备 提供创建新进程与已 ...
- 作业五：分析system_call中断处理过程
分析system_call中断处理过程 一.MesuSO增加getpid和getpid-asm 二.使用GDB跟踪系统调用内核函数sys_getpid 分析system_call中断处理过程 使用gd ...
- “数学口袋精灵”App的第一个Sprint计划
一.现状 我们这个团队想制作一个关于运算的游戏类型手机软件,针对我们这个学期的Android软件开发的课程,制作出一个关于数学算术游戏软件. 二.任务认领 第一阶段先把静态网页制作出来,各自的任务: ...
- 关于java中指针的概念
今天寡人遇到一个问题,扫描非关系数据库中的图(由node和rel组成),将其转化成由寡人自定义的gnode和gedge组成的图. gnode类包含结点的id,label和包含此gnode的gedge的 ...
- Docker(二十三)-Docker使用pipework配置本地网络
需求 在使用Docker的过程中,有时候我们会有将Docker容器配置到和主机同一网段的需求.要实现这个需求,我们只要将Docker容器和主机的网卡桥接起来,再给Docker容器配上IP就可以了. 下 ...
- array_column 函数, 以及在PHP5.5之下的替代方法
array_column 函数, 是能够根据多维数组中共有的一个键值来提取多维数组中属于这个键的值 例如下面的数组: $test = array( 0 => array( 'id' => ...
- MongoDB入门 和nodejs操作
简介 MongoDB 开源,高性能的NoSQL数据库:支持索引.集群.复制和故障转移.各种语言的驱动程序:高伸缩性: NoSQL毕竟还处于发展阶段,也有说它的各种问题的:http://coolshel ...