溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS中absolute與relative的限制有哪些，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
relative對absolute的限制之一
absolute，擁有top、right、bottom、left四項技能，從此天高任鳥飛，海闊任魚躍；本來想去哪兒就去哪兒，自由自在，生活是那么地美好。
直到有一天，在出去玩的路上，遇到一個relative，跳出來大喊一聲；“此山是我開，此樹是我栽，要從此路過，留下買路財！”
然后，我們可愛噠absolute小朋友就乖乖地屈服了。
但是無良的relative收到好處居然還不放行，死活不讓absolute過去。。。額，這個故事就是這樣子的。。。相信大家都懂的。。。
額，還是寫個demo吧，看這里：
XML/HTML Code復制內容到剪貼板
<!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 50px;
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;
}
.box2 p {
margin-left: 30px;
}
.box img {
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>
<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在這里：
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relative對absolute的限制2</title>
<style>
.box {
width:500px;
height:250px;
background-color: pink;
margin:50px auto 50px;
overflow: hidden;
}
.box p {
margin: 20px 30px 20px 120px;
text-align: left;
}
.box img {
position: absolute;
margin-left:-30px;
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小朋友出去玩啦。</p>
<p>鑒于上次用top、right、bottom、left技能的時候遇到了relative，導致出不去的尷尬，今天用的是margin負值技能。</p>
<p>雖然房子周圍設置了overflow:hidden，但這位強大的小朋友依然跑出去啦。</p>
</div>
<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負值技能。</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復制內容到剪貼板
<!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的限制有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
