写在开篇:

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不得不说的故事的更多相关文章

  1. css absolute与relative的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  3. css absolute和float,relative,z-index的同异

    大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...

  4. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  5. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

  6. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  7. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  8. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  9. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

随机推荐

  1. mysql数据出现Unknown column 'user_uid' in 'field list' sql错误

    来源:https://blog.csdn.net/gnail_oug/article/details/53606608 在操作mysql数据库时提示com.mysql.jdbc.exceptions. ...

  2. 团队冲刺随笔合集—Beta阶段

    第一篇:http://www.cnblogs.com/Team-Blog/p/9049271.html 第二篇:https://www.cnblogs.com/Team-Blog/p/9064478. ...

  3. [软工课程博客] 求解第N个素数

    任务 求解第 10,0000.100,0000.1000,0000 ... 个素数(要求精确解). 想法 Sieve of Eratosthenes 学习初等数论的时候曾经学过埃拉托斯特尼筛法(Sie ...

  4. pandas读取csv数据时设置index

    比如读取数据时想把第一列设为index,那么只需要简单的 pd.read_csv("new_wordvecter.csv",index_col=[0]) 这里index_col可以 ...

  5. Java认识对象

    一.类与对象 java中有基本类型和类类型两个类型系统.Java撰写程序几乎都在使用对象,要产生对象必须先定义类,类是对象的设计图,对象是类的实例 1.定义类 类定义使用的关键词为class,建立实例 ...

  6. Alpha冲刺第9天

    Alpha第9天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  7. jQuery~DOM基础操作

    操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...

  8. php四排序-冒泡排序

      算法和数据结构是一个编程工作人员的内功,技术牛不牛,一般都会看这两点.作为php程序员, 提升技能当然也得学习算法. 下面介绍四种入门级排序算法: 冒泡排序.选择排序.插入排序.快速排序.   一 ...

  9. ES6学习笔记(五):Class和Module

    Class Class 只是一个语法糖,其功能用es5也能实现,但是比es5更符合类的期待 定义: constructor代表构造方法,而this指向new 生成的实例 定义类方法时,可以不使用fun ...

  10. Vue入门---属性、style和class绑定方法

    一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...