写在开篇:
absolute说:“relative,我这辈子都不想看见你!”
为什么呢?它们明明那么相亲相爱,形影不离,这之中到底发生了什么不为人知的故事,竟然让absolute如此讨厌relative?
要想找到问题的答案,请跟我来。。。
relative对absolute的限制之一
absolute,拥有top、right、bottom、left四项技能,从此天高任鸟飞,海阔任鱼跃;本来想去哪儿就去哪儿,自由自在,生活是那么地美好。
直到有一天,在出去玩的路上,遇到一个relative,跳出来大喊一声;“此山是我开,此树是我栽,要从此路过,留下买路财!”
然后,我们可爱哒absolute小朋友就乖乖地屈服了。
但是无良的relative收到好处居然还不放行,死活不让absolute过去。。。额,这个故事就是这样子的。。。相信大家都懂的。。。
额,还是写个demo吧,看这里:
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>relative对absolute的限制1</title>
<style>
.box{
width:500px;
height:250px;
background-color:pink;
margin:30pxauto50px;
line-height:250px;
text-align:center;
}
.boxp{
display:inline-block;
vertical-align:middle;
width:300px;
font-size:16px;
line-height:1.5;
text-align:left;
}
.box2p{
margin-left:30px;
}
.boximg{
position:absolute;
left:0;
top:0;
}
.box2{
position:relative;
}
</style>
</head>
<body>
<divclass="boxbox1">
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<p>今天,absolute小朋友出去玩啦,开启left:0;top:0;这个组合技能,一切顺利,到达了天边。</p>
</div>
<divclass="boxbox2">
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"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在这里:
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>relative对absolute的限制2</title>
<style>
.box{
width:500px;
height:250px;
background-color:pink;
margin:50pxauto50px;
overflow:hidden;
}
.boxp{
margin:20px30px20px120px;
text-align:left;
}
.boximg{
position:absolute;
margin-left:-30px;
margin-top:-45px;
}
.box2{
position:relative;
}
</style>
</head>
<body>
<divclass="boxbox1">
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<p>今天,absolute小朋友出去玩啦。</p>
<p>鉴于上次用top、right、bottom、left技能的时候遇到了relative,导致出不去的尴尬,今天用的是margin负值技能。</p>
<p>虽然房子周围设置了overflow:hidden,但这位强大的小朋友依然跑出去啦。</p>
</div>
<divclass="boxbox2">
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<p>今天,absolute小朋友又出去玩啦,同样用的是margin负值技能。</p>
<p>房子周围也是设置了overflow:hidden属性的,但是这位强大的小朋友依然跑出去啦。</p>
<p>咦,什么情况,我房子外边的那部分身体呢?</p>
<p>我擦嘞,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影响最小化原则。
来个例子,如下:
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>relative影响最小化</title>
<style>
*{
margin:0;
}
.wraper{
width:800px;
margin:50pxauto;
background-color:#ccc;
border:3pxsolidgreen;
}
.box{
width:500px;
margin:50pxauto;
background-color:orange;
border:3pxsolidblack;
}
img{
border:1pxsolidblue;
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:2pxsolidred;
}
.box4.absolute{
top:-10px;
right:-10px;
}
</style>
</head>
<body>
<divclass="wraper">
<divclass="boxbox1">
<imgsrc="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"alt="Apicture"style="width:50px;height:30px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<p>这是没有任何定位,正常流的样子。</p>
<p>后续。。。</p>
</div>
</div>
<divclass="wraper">
<divclass="boxbox2">
<imgclass="absolute"src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"alt="Apicture"style="width:50px;height:30px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<p>如果我们要将图像定位到黑色边框的左上角,应该怎么办?</p>
<p>很简单,绝对定位,不加任何偏移量,用margin微调,完成!</p>
</div>
</div>
<divclass="wraper">
<divclass="boxbox3">
<imgclass="absolute"src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"alt="Apicture"style="width:50px;height:30px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<p>如果我们要将图像定位到黑色边框的右上角,应该怎么办?</p>
<p>第一种方法,像刚才那样,直接绝对定位,再用margin调整;
这种方法需要消耗一点脑细胞,算一算到底应该位移多少像素。</p>
</div>
</div>
<divclass="wraper">
<divclass="boxbox4">
<divclass="relative">
<imgclass="absolute"src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"alt="Apicture"style="width:50px;height:30px"/>
</div>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="Apicture"style="width:100px;height:150px"/>
<p>第二种方法,就是大家喜闻乐见的relative+absolute定位啦。</p>
<p>不过,看在absolute那么讨厌relative的面子上,relative就只欺负它一个就好了,千千万万不要影响到其它花花草草。</p>
<p>具体来说,给这个需要定位的图像外加一层div,设置relative,让这个relative只影响需要绝对定位的元素。</p>
<p>relative影响最小化!</p>
</div>
</div>
</body>
</html>
以上这篇关于CSS absolute与relative不得不说的话就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持悠久资源网。
原文地址:http://www.cnblogs.com/cc156676/archive/2016/07/20/5688949.html