DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 關於CSS absolute與relative不得不說的話
關於CSS absolute與relative不得不說的話
編輯：前端技巧     

寫在開篇：

absolute說：“relative，我這輩子都不想看見你！”

為什麼呢？它們明明那麼相親相愛，形影不離，這之中到底發生了什麼不為人知的故事，竟然讓absolute如此討厭relative？

要想找到問題的答案，請跟我來。。。

relative對absolute的限制之一

absolute，擁有top、right、bottom、left四項技能，從此天高任鳥飛，海闊任魚躍；本來想去哪兒就去哪兒，自由自在，生活是那麼地美好。

直到有一天，在出去玩的路上，遇到一個relative，跳出來大喊一聲；“此山是我開，此樹是我栽，要從此路過，留下買路財！”

然後，我們可愛哒absolute小朋友就乖乖地屈服了。

但是無良的relative收到好處居然還不放行，死活不讓absolute過去。。。額，這個故事就是這樣子的。。。相信大家都懂的。。。

額，還是寫個demo吧，看這裡：

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>relative對absolute的限制1</title>  
  6.         <style>  
  7.             .box {   
  8.                 width:500px;   
  9.                 height:250px;   
  10.                 background-color: pink;   
  11.                 margin:30px auto 50px;   
  12.                 line-height: 250px;   
  13.                 text-align:center;   
  14.             }   
  15.   
  16.             .box p {   
  17.                 display: inline-block;   
  18.                 vertical-align: middle;   
  19.                 width:300px;   
  20.                 font-size: 16px;   
  21.                 line-height: 1.5;   
  22.                 text-align: left;   
  23.             }   
  24.   
  25.             .box2 p {   
  26.                 margin-left: 30px;   
  27.             }   
  28.   
  29.             .box img {   
  30.                 position: absolute;   
  31.                 left:0;   
  32.                 top:0;   
  33.             }   
  34.   
  35.             .box2 {   
  36.                 position: relative;   
  37.             }   
  38.   
  39.         </style>  
  40.     </head>  
  41.     <body>  
  42.         <div class="box box1">  
  43.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  44.             <p>今天，absolute小朋友出去玩啦，開啟left:0; top:0; 這個組合技能，一切順利，到達了天邊。</p>  
  45.         </div>  
  46.   
  47.         <div class="box box2">  
  48.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  49.             <p>今天，absolute小朋友又出去玩啦，同樣開啟left:0; top:0; 這個組合技能，但是天公不作美，出門就碰到relative這個壞家伙，於是止步於relative的地方。</p>  
  50.         </div>  
  51.     </body>  
  52. </html>  

relative對absolute的限制之二

上回說到，absolute小朋友用top、right、bottom、left四項技能出去玩的時候被relative半路給截住了。

這次absolute小伙伴吸取了教訓，不用那四項技能了，用margin負值技能，一樣能跑出去玩。

很好，雖然房子周圍有overflow:hidden的魔法結界，但是我們的absolute小朋友直接無視之，從容通過，大家鼓掌！！！

但是，但是，但是那個無良的relative又來啦。

還好，還好，還好這次的是margin負值技能，absolute小朋友成功突破了relative的限制，跑出去啦。。。

額，好像有什麼不對。。。

我跑出去那部分身體怎麼不見啦？

demo在這裡：

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>relative對absolute的限制2</title>  
  6.         <style>  
  7.             .box {   
  8.                 width:500px;   
  9.                 height:250px;   
  10.                 background-color: pink;   
  11.                 margin:50px auto 50px;   
  12.                 overflow: hidden;                   
  13.             }   
  14.   
  15.             .box p {   
  16.                 margin: 20px 30px 20px 120px;   
  17.                 text-align: left;   
  18.             }   
  19.   
  20.             .box img {   
  21.                 position: absolute;   
  22.                 margin-left:-30px;   
  23.                 margin-top: -45px;   
  24.             }   
  25.   
  26.             .box2 {   
  27.                 position: relative;   
  28.             }   
  29.   
  30.         </style>  
  31.     </head>  
  32.     <body>  
  33.         <div class="box box1">  
  34.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  35.             <p>今天，absolute小朋友出去玩啦。</p>  
  36.             <p>鑒於上次用top、right、bottom、left技能的時候遇到了relative，導致出不去的尴尬，今天用的是margin負值技能。</p>  
  37.             <p>雖然房子周圍設置了overflow:hidden，但這位強大的小朋友依然跑出去啦。</p>  
  38.         </div>  
  39.   
  40.         <div class="box box2">  
  41.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  42.             <p>今天，absolute小朋友又出去玩啦，同樣用的是margin負值技能。</p>  
  43.             <p>房子周圍也是設置了overflow:hidden屬性的，但是這位強大的小朋友依然跑出去啦。</p>  
  44.             <p>咦，什麼情況，我房子外邊的那部分身體呢？</p>  
  45.             <p>我擦嘞，relative你什麼時候來的？</p>  
  46.         </div>  
  47.     </body>  
  48. </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復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>relative影響最小化</title>  
  6.         <style>  
  7.             * {   
  8.                 margin:0;   
  9.             }   
  10.   
  11.             .wraper {   
  12.                 width:800px;   
  13.                 margin:50px auto;   
  14.                 background-color: #ccc;   
  15.                 border: 3px solid green;   
  16.             }   
  17.   
  18.             .box {   
  19.                 width:500px;   
  20.                 margin:50px auto;   
  21.                 background-color: orange;   
  22.                 border: 3px solid black;   
  23.             }   
  24.   
  25.             img {   
  26.                 border:1px solid blue;   
  27.                 margin:10px;   
  28.             }   
  29.   
  30.             p {   
  31.                 padding-left:10px;   
  32.                 margin:10px;   
  33.             }   
  34.   
  35.             .absolute {   
  36.                 position: absolute;   
  37.             }   
  38.   
  39.             .box2 .absolute {   
  40.                 margin-left: -3px;   
  41.                 margin-top: -3px;   
  42.             }   
  43.   
  44.             .box3 .absolute {   
  45.                 margin-top:-3px;   
  46.                 margin-left:450px;    
  47.             }   
  48.   
  49.             .box4 .relative {   
  50.                 position: relative;   
  51.                 border:2px solid red;   
  52.             }   
  53.   
  54.             .box4 .absolute {   
  55.                 top:-10px;   
  56.                 right:-10px;   
  57.             }   
  58.         </style>  
  59.     </head>  
  60.     <body>  
  61.         <div class="wraper">  
  62.             <div class="box box1">  
  63.                 <img src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  64.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  65.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  66.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  67.                 <p>這是沒有任何定位，正常流的樣子。</p>  
  68.                 <p>後續。。。</p>  
  69.             </div>  
  70.         </div><!--關閉wraper-->  
  71.         <div class="wraper">  
  72.             <div class="box box2">  
  73.                 <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  74.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  75.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  76.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  77.                 <p>如果我們要將圖像定位到黑色邊框的左上角，應該怎麼辦？</p>  
  78.                 <p>很簡單，絕對定位，不加任何偏移量，用margin微調，完成！</p>  
  79.             </div>  
  80.         </div><!--關閉wraper-->  
  81.         <div class="wraper">  
  82.             <div class="box box3">  
  83.                 <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  84.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  85.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  86.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  87.                 <p>如果我們要將圖像定位到黑色邊框的右上角，應該怎麼辦？</p>  
  88.                 <p>第一種方法，像剛才那樣，直接絕對定位，再用margin調整；   
  89.                 這種方法需要消耗一點腦細胞，算一算到底應該位移多少像素。</p>  
  90.             </div>  
  91.         </div><!--關閉wraper-->  
  92.         <div class="wraper">  
  93.             <div class="box box4">  
  94.                 <div class="relative">  
  95.                     <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  96.                 </div>  
  97.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  98.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  99.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  100.                 <p>第二種方法，就是大家喜聞樂見的relative+absolute定位啦。</p>  
  101.                 <p>不過，看在absolute那麼討厭relative的面子上，relative就只欺負它一個就好了，千千萬萬不要影響到其它花花草草。</p>  
  102.                 <p>具體來說，給這個需要定位的圖像外加一層div，設置relative，讓這個relative只影響需要絕對定位的元素。</p>  
  103.                 <p>relative影響最小化！</p>  
  104.             </div>  
  105.         </div><!--關閉wraper-->  
  106.     </body>  
  107. </html>  

以上這篇關於CSS absolute與relative不得不說的話就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/20/5688949.html

前端技巧
常用元素默認margin和padding值問題探討
關於默認元素在不同浏覽器中的margin值是多少的問題，今天做了一個探討復制代碼代碼如下: // b
25條div+css編程提醒及小技巧整理
1、ul標簽在Mozilla中默認是有padding值的，而在IE中只有margin有值。2、同一個
網頁設計:海量素材的准確位置和用途
三遍記憶,讓你記住海量素材的准確位置和用途,提高其可用性. 這僅僅是一個示意圖.在以往的日子裡,我

相關文章

前端技巧關於網頁技巧WEB前端代碼網頁特效代碼
小編推薦
網站地圖放到網頁底部的好處和實例 愛上樸實的CSS細節雖不起眼可提高效率 設計好用、易用web應用程序的10個技巧 link和@import的區別深入探討 對於圖片社交網站UI應用的對比分析(圖) 總結一下時下流行的浏覽器User-Agent大全 網頁色彩對比與調和技巧分享 常用的幾個單頁應用程序網站分享 Bootstrap3.0學習筆記之入門篇 網頁設計師如何應聘網頁設計職位
熱門推薦
網站界面設計中為網站創建風格指南的方法(圖文) form表單中的Input使用disabled不能提交的解決方法 如何判斷JavaScript中的數據類型 IE6中PNG Alpha透明(全集) 切勿用數字開頭來命名css偽類名 5個響應式設計不值得搞的原因(圖文) 網頁設計中的tab應用的兩種類型 設計理論：字體設計的基本知識 優酷視頻去30秒廣告代碼的兩種方法
大家都在看
js實現在頁面上彈出蒙板技巧簡單實用 JS組件Bootstrap Table表格行拖拽效果實現代碼 根據用戶浏覽器及分辨率調用不同的CSS樣式文件 多個checkbox被選中時如何判斷是否有自己想要的 jquery獲取img的src值的簡單實例 常用js,css文件統一加載方法(推薦) 並在加載之後調用回調函數 jquery 實現上下滾動效果示例代碼 Javascript Global對象
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved