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甲题题解-1127. ZigZagging on a Tree (30)-中序、后序建树
根据中序遍历和前序遍历确定一棵二叉树,然后按“层次遍历”序列输出.输出规则:除根节点外,接下来每层的节点输出顺序是:先从左到右,再从右到左,交替输出 #include <iostream> ...
- Todo&Rocket
Todo是怎么实现的? 前面两篇博客分别介绍了MVC和Backbone.js的逻辑,但是实战获真知,在来一篇来显示下Todo是怎么通过Backbone.js连接起来的. 忽略掉所有的代码,我们只是打开 ...
- linux内核分析--操作系统是如何工作的？
一个简单的时间片轮转多道程序 操作系统的"两把剑":中断上下文(保存现场和恢复现场)和进程上下文的切换 源代码的分析 *使用的源代码为视频中所使用的精简内核的源代码 首先分析myp ...
- C++：派生类的构造函数和析构函数的调用顺序
一.派生类 在C++编程中,我们在编写一个基类的派生类时,大致可以分为四步: • 吸收基类的成员:不论是数据成员还是函数成员,派生类吸收除基类的构造函数和析构函数之外的全部成员. • 改造基类函数:在 ...
- ElasticSearch 2 (5) - Document APIs
ElasticSearch 2.1.1 (5) - Document APIs This section describes the following CRUD APIs: Single docu ...
- 1-Python3从入门到实战—基础之语法
Python从入门到实战系列--目录 编码格式 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串 # -*- coding=utf-8 -*- 也可以 ...
- 11th 回顾5个问题
当初提出的5个问题: 1.书中说很多非常成功的软件都是赢在用户体验,后面的第12章也专门提到了用户体验,说软件开发时可以使用5W1H的方法来判断用户的体验,而需求分析需要获取用户需求,进行用户调研,那 ...
- Docker的入门使用（初探总结）
Docker容器包含两种(Linux,Windows)内核,常用的为Linux. linux ,mac,windows8及以下(boot2docker,通过Linux虚拟机实现)的Docker提供Li ...
- 4种PHP回调函数风格
4种PHP回调函数风格 匿名函数 $server->on('Request', function ($req, $resp) use ($a, $b, $c) { echo "hell ...
- Linux命令（十六） 压缩或解压缩文件和目录 zip unzip
目录 1.命令简介 2.常用参数介绍 3.实例 4.直达底部 命令简介 zip 是 Linux 系统下广泛使用的压缩程序,文件压缩后扩展名为 ".zip". zip 命令用来将文件 ...