碼上快樂

相關內容    簡體    繁體

HTML中的布局方式：absolute、relative、fixed、static

本文轉載自   查看原文   2016-07-05 11:09   1646 
在CSS中關於定位的內容是：
position:relative | absolute | static | fixed
    static(靜態) 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級，這是默認值。
    relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
     absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
    fixed（固定定位） 這里所固定的參照對像是 可視窗口而並非是body或是父級元素，其總是固定在瀏覽器窗口的某個位置，並且不受滾動的影響，是絕對的坐標定位。可通過z-index進行層次分級。
注：
CSS中定位的層疊分級： z-index: auto | namber;

auto 遵從其父對象的定位
namber  無單位的整數值。可為負數，默認值為0，越大越靠上，值大的元素會覆蓋住值小的元素。
分析：
  1. div1和div2由於是absolute布局，其位置完全由left和top來決定，不受父元素的padding的影響，完全脫離文檔流
  2. div3和div4是relative布局，其位置除了由left和top來決定外，還受父元素的padding以及文檔流的影響，比如，div4就受到了div3的影響，盡管其top和div3一樣都是0，但是卻顯示在div4的下面，因為div3在文檔流中，div4只能跟着文檔流，排在div3的下面
  3. div5是fixed布局，其位置始終是左上角，即使瀏覽器滾動，它還是固定在左上角
  4. 關於z-index，如果不寫則默認值是0，上面的例子很好的說明了z-index的作用
  5. absolute布局，其參考點是最近的具有position屬性的元素，如果本例中將main div的position屬性去掉的話，整體布局就會不一樣，這個時候，div1和div2的參考點是body
[html]  view plain  copy
 
  1. <html><head>  
  2. <style type="text/css">  
  3. body{margin:0px;padding:0px;line-height:100%;}  
  4. div  
  5. {  
  6.     background-color:rgb(159, 206, 159);  
  7.     width:95px;  
  8.     height:95px;  
  9.     margin: 0px 0px 1px 1px;  
  10.     padding:0px;  
  11.     /*display:inline-block;*/  
  12.     letter-spacing:1px;  
  13.       
  14.     /* only for ie*/  
  15.     *display:inline;  
  16.     *zoom:1;  
  17.       
  18.     border:1px solid #ffffff;  
  19.     border-radius:5px;  
  20.     -moz-border-radius:5px; /* Old Firefox */  
  21.     opacity:1;  
  22.     text-align:center;  
  23.     color:white;  
  24. }  
  25. #main{width:400px;height:300px;}  
  26. </style>  
  27. </head>  
  28.   
  29. <body>  
  30. <div id="main" style="  
  31.     position: relative;  
  32.     margin: 50px;  
  33.     padding: 80px;  
  34. ">  
  35. <div id="div1" style="  
  36.     position: absolute;    
  37.     left: 83px;    
  38.     top: 0px;  
  39.     background-color: rgb(199, 219, 50);  
  40. ">div1 absolute</div>  
  41. <div id="div2" style="  
  42.     position: absolute;  left: 0px;    
  43.     top: 90px;  
  44.     background-color: rgb(1, 214, 35);  
  45.     z-index:10;  
  46. ">div2 absolute z-index<br/>:10</div>  
  47. <div id="div3" style="  
  48.     position: relative;  left: 0px;    
  49.     top: 0px;  
  50.     background-color: rgb(23, 178, 238);  
  51.     z-index:11  
  52. ">div3 relative z-index:11</div>  
  53. <div id="div4" style="  
  54.     position: relative;  left: 0px;    
  55.     top: 0px;  
  56.     background-color: rgb(23, 178, 238);  
  57.     z-index:0;  
  58. ">div4 relative z-index:0</div>  
  59. <div id="div5" style="  
  60.     position: fixed;  left: 10px;    
  61.     top: 10px;  
  62.     background-color: rgb(229, 122, 238);  
  63. ">div5 fixed</div>  
  64. </div>  
  65.   
  66. </body></html>  
請參見：http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 position的四種定位方式：static、fixed、relative、absolute CSS中position屬性( absolute | relative | static | fixed )詳解 HTML靜態網頁的格式與布局（position：（fixed、absolute、relative）、分層、float（left、right）） css屬性position: static|relative|absolute|fixed|sticky簡單解析 Position屬性四個值：static、fixed、absolute和relative的區別和用法 Position屬性四個值：static、fixed、absolute和relative的區別和用法 探究css中relative、fixed、absolute定位的區別。 CSS的position之absolute、fixed和relative區別 css的定位，relative/absolute/fixed的用法 CSS+DIV布局中absolute和relative的區別
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM