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结合起来一起用的 ...
随机推荐
- C++ 派生类成员的访问属性
派生类成员的访问属性: C++继承方式总共分为以下几种:public.private.protected三种(它们直接影响到派生类的成员.及其对象对基类成员访问的规则).(1)public(公有继承) ...
- alpha发布排序结果
友组所做排序 其中有一组是教师排序. 序号 组名 组长 项目简称 匿名1组 匿名2组 匿名3组 匿名4组 匿名5组 匿名6组 匿名7组 匿名8组 平均 1 新蜂 武志远 俄罗斯 2 3 3 4 4 5 ...
- Alpha 冲刺报告模板
Alpha 冲刺报告模板 Deadline: 十分钟左右站立会议,控制好时间,不要在此会议上讨论细节问题. 每组一份博客,组内共享,每人都需提交. 模板 队名:xxx 组员1(组长) 今天完成了哪些任 ...
- Mininet入门与实战 3.9参课记录
Mininet入门与实战 Mininet简介 由来:斯坦福大学发明,基于Linux Container架构开发的进程虚拟化网络仿真工具,交换机支持OF协议. 使用情况: 控制器,不推荐自带控制器(bu ...
- We are a team----sh_6666
团队宣言:编程,我们是玩命的,玩命,我们是认真的. 团队简介: 团队名称:sh_6666队 团队博客链接:http://www.cnblogs.com/sh-6666/ 人物简介: 剧团导演:吴小勇 ...
- PHP 爬虫——QueryList
前言: 来了个任务说要做个电影网站,要写个壳,数据直接从别人那扒.行吧!那就要学习下PHP爬虫了.占个博客,以后补充.http://study.querylist.cc/archives/6/ 之前开 ...
- 【设计模式】—— 外观模式Facade
前言:[模式总览]——————————by xingoo 模式意图 外观模式主要是为了为一组接口提供一个一致的界面.从而使得复杂的子系统与用户端分离解耦. 有点类似家庭常用的一键开关,只要按一个键,台 ...
- java工程师需要学什么
成为一名Java高级工程师你需要学什么 宏观上: 1.技术广度方面至少要精通多门开源技术吧,研究过struts\spring等的源码. 2.项目经验方面从头到尾跟过几个大项目,头是指需求阶段,包括需求 ...
- c/c++ 函数说明以及技巧总结
1. memset函数: void *memset(void *s, int ch, size_t n); 函数解释:将s中当前位置后面的n个字节 (typedef unsigned int size ...
- BZOJ4078 WF2014Metal Processing Plant（二分答案+2-SAT）
题面甚至没给范围,由数据可得n<=200.容易想到二分答案,暴力枚举某集合的价值,2-SATcheck一下即可.这样是O(n4logn)的. 2-SAT复杂度已经是下界,考虑如何优化枚举.稍微改 ...