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结合起来一起用的 ...
随机推荐
- Linux第七周学习总结——可执行程序的装载
Linux第七周学习总结--可执行程序的装载 作者:刘浩晨 [原创作品转载请注明出处] <Linux内核分析>MOOC课程http://mooc.study.163.com/course/ ...
- C#获取每月最后一天或者最末一天的方法
/// <summary> /// 取得某月的第一天 /// </summary> /// <param name="datetime">要取得 ...
- 个人项目——wc源程序特征统计
这一次要做的项目是wc——统计程序文件特征的命令行程序. 根据需求需求得到的模式为:wc.exe [parameter][filename] 在[parameter]中,用户通过输入参数与程序交互,需 ...
- 编写JDBC框架:(策略设计模式)
package com.itheima.domain; //一般:实体类的字段名和数据库表的字段名保持一致 //约定优于编码 public class Account { private int id ...
- struts2中的方法的调用
转载:http://blog.csdn.net/hephec/article/details/41808585 在Struts2中方法调用概括起来主要有三种形式: 第一种方式:指定method属性 & ...
- [转帖]SAP MES生产执行系统解决方案
一.SAP MES概述: SAP公司成立于1972年,总部位于德国,是全球最大的企业管理和协同化商务解决方案供应商.全球第三大独立软件供应商.目前,在全球有120多个国家的超过86,000多家用户正在 ...
- dotTrace 每行执行时间和执行次数
如果代码中出现效率问题,使用dotTrace来跟踪分析代码的效率问题还是很方便的.使用dotTrace不但可以看到每一个方法被调用的次数和总时间,而且可以引入源代码,查看源代码中每一行执行的次数和时间 ...
- echarts实现环形图
前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...
- BZOJ2653 middle(二分答案+主席树)
与中位数有关的题二分答案是很常用的trick.二分答案之后,将所有大于它的看成1小于它的看成-1,那么只需要判断是否存在满足要求的一段和不小于0. 由于每个位置是1还是-1并不固定,似乎不是很好算.考 ...
- Maven项目打包,Jar包不更新的问题
问题: 我的maven项目A要打成Jar包A,依赖了另外一个项目B生成的Jar包B.更改了项目B的代码,然后继续打包项目A,生成的Jar包A中并没有我修改了的代码. 原因: Jar包B在开始时被Ins ...