定位（position）

時間  2019-11-15
標籤 定位 position 欄目 系統網絡 简体版
原文   原文鏈接

position ：屬性規定元素的定位類型css

       

語法： 
position : static | absolute | fixed | relativehtml

          JavaScript語法：object.style.position="absolute"瀏覽器

參數： 
static : 無特殊定位，對象遵循HTML定位默認規則 ，沒有定位，元素出如今正常的流中app


absolute : 絕對定位。相對於 static 定位之外的第一個父元素進行定位，將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。框架

　　　　　　而其層疊經過z-index屬性定義。此時對象不具備邊距，但仍有補白和邊框。相對於position屬性非static值的最近父級元素進行偏移，若是父級都工具

　　　　　　是static（文檔流），則相對整個文檔進行偏移。偏移後，原來的空間會被其餘元素擠佔 佈局

fixed:絕對定位。相對於瀏覽器窗口進行定位。
relative : 相對定位。相對於其正常位置進行定位，對象不能像絕對定位同樣層疊，但可依據left，right，top，bottom等屬性在正常文檔流中相對原先對象的位                  置進行偏移。原先的位置會被其餘元素擠佔。學習

      position說明：
      設置對象的定位方式，可讓佈局層容易位置絕對定位，控制盒子對象更加準確。字體

　　.divcss5{position:relative} 定義，一般最好再定義CSS寬度和CSS高度
　　.divcss5-a{position:absolute;left:10px;top:10px} 這裏定義了距離父級左側距離間距爲10px，距離父級上邊距離爲10px
　　或
　　.divcss5-a{position:absolute;right:10px;bottom:10px} 這裏定義了距離父級靠右距離10px,距離父級靠下邊距離爲10px網站

　　　　　　left（左）和right（右）在一個對象只能選一種定義，bottom（下）和top（上）也是在一個對象只能選一種定義。

　　　　　　

絕對定位若是父級不使用position:relative，而直接使用position:absolute絕對定位，這個時候將會以body標籤爲父級，使用position:absolute定義對象不管位於DIV多少層結構，都將會被拖出以<body>爲父級（參考級）進行絕對定位。絕對定位很是好用，但切記不要濫用，什麼地方都用，這樣有時會懶得計算距離上、下、左、右間距，同時可能會形成CSS代碼臃腫，更加經驗適當使用，用於該使用地方。

在絕對定位時候咱們可使用css z-index定義css層重疊順序。

同時left、right、bottom、top的數值，可使用（Photoshop）PS切片工具獲取準確的數值。

遇到以上的不規則案例佈局，若是使用float、padding等浮動實現比較麻煩，但使用position絕對定位便可很好簡單地實現。 

　　　　width：寬度，設置對象寬度

           height：高度，設置對象高度
           line-height：行高，設置文本行高
           left：設置div對象靠左距離
           right：設置div對象靠左距離
           top：設置div對象靠左距離
           bottom：設置div對象靠左距離
           background：背景，設置背景圖片和顏色
           color：設置字體顏色
           font-size：設置字體大小
           font-weight：設置字體加粗

          div標籤：用於佈局結構框架
          ul li標籤：用於佈局列表型數據列表
          h3標籤：用於佈局欄目標題

一、完整CSS代碼

  1. @charset "utf-8"; 
  1. /* DIVCSS5-CSS初始化模板-www.divcss5.com */ 
  2. body, div, ul, li,h3{
  3. margin:0; padding:0;
  4. font-style: normal;
  5. font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
  6. /* \5B8B\4F53 表明 宋體，更多中文字體轉 Unicode http://www.divcss5.com/jiqiao/j325.shtml */ 
  7. ol, ul ,li{list-style:none} 
  8. img {border: 0; vertical-align:middle} 
  9. body{color:#FFF;background:#FFF; text-align:center} 
  10. a{color:#FFF;text-decoration:none}  
  11. a:hover{color:#BA2636;text-decoration:underline} 
  12. /* 根據本實例 設置超連接字體與沒有超連接字體演示爲白色 */ 
  13.  
  14. #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 
  15. /* position:relative是絕對定位關鍵，父級設置 */ 
  16.  
  17. .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 
  18. .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 
  19. .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 
  20. /* position:absolute是絕對定位關鍵，子級設置同時lef right top bottom配合使用 */ 
  21.  
  22. h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} 
  23. /* 標題統一設置 */ 
  24. ul.list{ text-align:left; width:100%; padding-top:8px} 
  25. ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden} 
  26. /* 加了overflow:hidden防止內容過多後自動換行 隱藏超出內容 */ 

二、完整HTML代碼：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>絕對定位 實例在線演示 DIVCSS5</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.divcss5.com --> 
  8. </head> 
  9. <body> 
  10. <div id="wrapper"> 
  11. <div class="box1"> 
  12. <h3 class="title">新聞動態</h3> 
  13. <ul class="list"> 
  14. <li><a href="http://www.divcss5.com/wenji/w558.shtml">不會程序能學會CSS嗎？</a></li> 
  15. <li><a href="http://www.divcss5.com/wenji/w556.shtml">DIVCSS學習難嗎？</a></li> 
  16. <li><a href="http://www.divcss5.com/peixun/">我要參加DIVCSS5的培訓</a></li> 
  17. <li><a href="http://www.divcss5.com/css-tool/t720.shtml">jQuery因此版本集合整理</a></li> 
  18. </ul> 
  19. </div> 
  20. <div class="box2"> 
  21. <h3 class="title">DIVCSS5欄目</h3> 
  22. <ul class="list"> 
  23. <li><a href="http://www.divcss5.com/html/">CSS基礎教程</a></li> 
  24. <li><a href="http://www.divcss5.com/htmlrumen/">HTML基礎教程</a></li> 
  25. <li><a href="http://www.divcss5.com/wenji/">CSS問題</a></li> 
  26. <li><a href="http://www.divcss5.com/css-tool/">CSS製做工具</a></li> 
  27. <li><a href="http://www.divcss5.com/jiqiao/">DIV CSS技巧</a></li> 
  28. <li><a href="http://www.divcss5.com/css-texiao/">DIV+CSS+JS特效</a></li> 
  29. </ul> 
  30. </div> 
  31. <div class="box3"> 
  32. <h3 class="title">網站欄目</h3> 
  33. <ul class="list"> 
  34. <li><a href="http://www.divcss5.com/cssrumen/">DIV CSS入門</a></li> 
  35. <li><a href="http://www.divcss5.com/htmlrumen/">HTML入門教程</a></li> 
  36. <li><a href="http://www.divcss5.com/shili/">CSS實例</a></li> 
  37. <li><a href="http://www.divcss5.com/">DIVCSS5首頁</a></li> 
  38. <li><a href="http://www.divcss5.com/template/">DIV CSS模塊模板</a></li> 
  39. <li><a href="http://www.divcss5.com/w3c/">DIV CSS WEB標準</a></li> 
  40. </ul> 
  41. </div> 
  42. </div> 
  43. </body> 
  44. </html>

 

 相對定位特色：

　　相對於自身原有位置進行偏移；　　

　　仍處於標準文檔流中；

　　隨即擁有偏移屬性和z-index屬性（z-index屬性：空間的層堆疊，會產生一個z軸的堆疊，若是沒有z軸就會堆疊在x軸和y軸之間）

　　position：relative 塊級元素會處於標準文檔流中，會發生偏移重疊，有可能會延伸

絕對定位特色：

　　創建了以包含塊爲基準的定位

　　徹底脫離了標準文檔流

　　隨即擁有偏移屬性和z-index屬性（空間的層堆疊）

　　較相對定位更復雜

     選擇偏移的基準考慮的比較多，偏移的基準指相對運動中的參照物

　　一、未設置偏移量

　　　　特色：

　　　　　　不管是否存在已定位祖先元素，都保持在元素初始位置

　　　　　　脫離了標準文檔流

　　　　position：absolute尺寸隨着內容的增長而擴展

　　　　　　（已定位祖先元素：某個元素設置了定位）

　　二、設置偏移量

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程