專注搜索競價代運(yùn)營

成長之選 ，效果之道！

免費(fèi)咨詢熱線：17636682598

css定位布局方式有那幾種怎么設(shè)置屬性

css定位方式有那幾種，css定位怎么用都有那些不同之處，如何讓塊狀居中定位布局屬性怎么寫能實現(xiàn)

position: fixed窗口固定位置定位

position: fixed; 的元素是相對于窗口定位的，這意味著即使?jié)L動頁面，它也始終位于同一位置

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"> 
  6.         <title>通高科技</title> 
  7.         <style> 
  8.             .footer{ 
  9.                 width: 100%; 
  10.                 height: 40px; 
  11.                 position: fixed; 
  12.                 bottom: 0; 
  13.                 right: 0; 
  14.                 background-color:#73AD21; 
  15.             } 
  16.              
  17.             } 
  18.         </style> 
  19.     </head> 
  20.     <body> 
  21.         <div class="footer"> 
  22.             position: fixed 窗口固定位置，不受頁面滾動影響 
  23.         </div> 
  24.          
  25.     </body> 
  26. </html> 

position: absolute絕對定位

絕對定位的特點：（務(wù)必記?。?/p>

如果沒有父元素沒有定位，則以瀏覽器為準(zhǔn)定位（Document 文檔）。

如果父元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。

絕對定位不再占有原先的位置。（脫標(biāo)）所以絕對定位是脫離標(biāo)準(zhǔn)流的。

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>通高科技</title> 
  6.         <style> 
  7.             .num2{ 
  8.                 width: 400px; 
  9.                 height: 400px; 
  10.                 position: relative; 
  11.                 left:100px; 
  12.                 border: 3px solid #73AD21; 
  13.             } 
  14.             .num3{ 
  15.                 width: 200px; 
  16.                 height: 200px; 
  17.                 position: absolute; 
  18.                 right:100px; 
  19.                 top: 20px; 
  20.                 background:red; 
  21.                 border: 3px solid #73AD21; 
  22.             } 
  23.         </style> 
  24.     </head> 
  25.     <body> 
  26.         <div class="num2"> 
  27.             這個 元素設(shè)置了 position: relative; 
  28.          
  29.             <div class="num3"> 
  30.                 absolute定位向右100px,距離頂部20PX 
  31.             </div> 
  32.         </div> 
  33.          
  34.         <div class="num3"> 
  35.             absolute沒有父元素定位，默認(rèn)定位body為父元素，向右100px,距離頂部20PX 
  36.         </div> 
  37.          
  38.     </body> 
  39. </html> 

運(yùn)行實例：

position: relative相對定位

使用position:relative，就需要top,bottom,left,right4個屬性來配合，確定元素的位置。是爭對原來位置進(jìn)行偏移的

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>通高科技</title> 
  6.         <style> 
  7.             .num2{ 
  8.                 width: 200px; 
  9.                 height: 200px; 
  10. /*              position: relative; */ 
  11.                 /* left:100px; */ 
  12.                 border: 3px solid #73AD21; 
  13.             } 
  14.             .num3{ 
  15.                 width: 200px; 
  16.                 height: 200px; 
  17.                 position: relative; 
  18.                 left:100px; 
  19.                 top: 20px; 
  20.                 background:red; 
  21.                 border: 3px solid #73AD21; 
  22.             } 
  23.         </style> 
  24.     </head> 
  25.     <body> 
  26.         <div class="num2"> 
  27.             position: 沒有使用relative定位 
  28.         </div> 
  29.         <div class="num3"> 
  30.             relative定位向左100px,距離頂部20PX 
  31.         </div> 
  32.     </body> 
  33. </html> 
運(yùn)行結(jié)果：

position: static靜態(tài)定位

position: static; 的元素不會以任何特殊方式定位；它始終根據(jù)頁面的正常流進(jìn)行定位：靜態(tài)定位的元素不受 top、bottom、left 和 right 屬性的影響。

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>通高科技</title> 
  6.         <style> 
  7.             .num2{ 
  8.                 width: 300px; 
  9.                 height: 300px; 
  10.                 position: static; 
  11.                 border: 3px solid #73AD21; 
  12.             } 
  13.         </style> 
  14.     </head> 
  15.     <body> 
  16.         <div class="num2"> 
  17.             position: static定位 
  18.         </div> 
  19.     </body> 
  20. </html> 

運(yùn)行結(jié)果

本文分類：營銷學(xué)院

瀏覽次數(shù)：51次瀏覽

發(fā)布日期：2022-07-05 11:43:52

本文鏈接：http://m.24hourphotoeditor.com/edu/2418.html