• <strong id="ajw1p"></strong>
    • \n    \n        \n            <\/div>\n            <\/div>\n            <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/body>\n \n<\/html><\/pre>
      我選定第二個元素作為我們本次的測試對象，測試環(huán)境為chrome 75版本。 <\/p>
      1、static<\/p>
      #the-box{\n    position: static;\n}<\/pre>
      結(jié)果：<\/p>
      正常文件流程顯示<\/p>
      \"詳解CSS中position屬性的用法\"\/<\/p>
      2、relative<\/p>
      #the-box{\n    position: relative;\n    top:100px;\n    left:200px;\n}<\/pre> 
      結(jié)果：<\/p>
      \"詳解CSS中position屬性的用法\"\/<\/p>
      相對於自身原來的位置偏移所設(shè)定的位置，但是原來的位置被保留下來。 <\/p>
      3、absolute<\/p>
      #the-box{\n    position: absolute;\n    top: 100px; \n    left: 200px;\n}<\/pre>
      結(jié)果：<\/p>
      \"詳解CSS中position屬性的用法\"\/<\/p>
      #原來固定的位置被別的元素佔用，由於父元素是非static（flex ），所以目前元素相對於父元素偏移所設(shè)定的位置。 <\/p>
      4、sticky<\/p>
      須指定 top, right, bottom 或 left 四個閾值其中之一，才可使黏性定位生效。否則其行為與相對定位相同。 <\/p>
      此特性是元素固定在視窗的位置，如果頁面沒有滾動軸，將無法展示特性，此時，我們對它的父元素稍加更改，使頁面出現(xiàn)滾動軸。 <\/p>
      .app-container {\n    width: 100%;\n    height: 3000px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n#the-box{\n    position: sticky;\n    top: 100px;\n}<\/pre>
      結(jié)果：<\/p>
      \"詳解CSS中position屬性的用法\"\/<\/p>
      當我們捲動頁面當元素距離頂部超過100px時，向下捲動時當前元素位置相對於視窗不變，此特性可以用作table固定表頭。 <\/p>
      5、fixed<\/p>
      對於ie7以下版本不能使用，其實就等於固定元素在瀏覽器視窗的位置。 <\/p>
      #the-box{\n    position: fixed;\n    top: 100px;\n    left: 200px;\n}<\/pre>
      結(jié)果：<\/p>\n
      \"詳解CSS中position屬性的用法\"<\/p>\n
      無論如何捲動捲動軸，元素位置始終不變。 <\/p>\n
      6、inherit<\/p>#
      規(guī)定應(yīng)該從父元素繼承 position 屬性的值。 <\/p>\n
      7、initial<\/p>\n
      initial 關(guān)鍵字用於設(shè)定 CSS 屬性為它的預(yù)設(shè)值，可作用於任何 CSS 樣式。 （IE 不支援該關(guān)鍵字）<\/p>\n
      8、unset<\/p>\n
      #名如其意，unset 關(guān)鍵字我們可以簡單理解為不設(shè)定。其實，它是關(guān)鍵字 initial 和 inherit 的組合。 <\/p>\n
      當我們給一個CSS 屬性設(shè)定了unset：<\/p>\n
      如果該屬性是預(yù)設(shè)繼承屬性，則該值等同於inherit<\/p>\n
      如果該屬性是非繼承屬性，則該值等同於initial<\/p>\n
      9、revert<\/p>\n
      暫時未列入規(guī)範。 <\/p>"}	
	







      亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
      
	

      
    

      

	
	
      
		
      
			
      
							
      
					
      
						首頁
						
												web前端
						
												css教學(xué)
						
						詳解CSS中position屬性的用法
					
      
					
					
      
						
      
							
      詳解CSS中position屬性的用法
      
							
							Apr 02, 2020 pm	 06:10 PM
															
      
																			css
																			position
																			屬性
																			用法
																	
      
														
						
      
					
      
					
      
					
      
						
      
						
						
						

					
      本篇文章介紹了CSS中的position屬性的用法、分類以及使用效果展示，希望對學(xué)習(xí)css的朋友有幫助！ 
      

      詳解CSS中position屬性的用法
      

      詳解CSS中position屬性的用法
      

      一、position屬性有什麼作用？ 
      

      CSS position屬性用來指定一個元素在文件中的定位方式。 top，right，bottom 和 left屬性則決定了該元素的最終位置。 （MDN定義）。 
      

      ( 推薦學(xué)習(xí)：CSS教學(xué) )
      

      二、position有哪些分類？ 
      

      1、static
      

      正常的佈局行為，元素在文件常規(guī)流程中目前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。 
      

      位置不變。 
      

      2、relative
      

      該關(guān)鍵字下，元素先放置在未新增定位時的位置，再在不改變頁面佈局的前提下調(diào)整元素位置（因此會在此元素未新增定位時所在位置留下空白）。 position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。 
      

      相對於自身位置的偏移。 
      

      3、absolute
      

      不為元素預(yù)留空間，透過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設(shè)定外邊距（margins），且不會與其他邊距合併。 
      

      就像從來沒有這個元素一樣，會根據(jù)此元素的非static祖先元素決定元素的偏移。 
      

      4、fixed
      

      不為元素預(yù)留空間，而是透過指定元素相對於螢?zāi)灰暣埃╲iewport）的位置來指定元素位置。元素的位置在螢?zāi)粷L動時不會改變。列印時，元素會出現(xiàn)在的每頁的固定位置。 fixed 屬性會建立新的層疊上下文。當元素祖先的 transform? 屬性非 none 時，容器由視窗改為祖先。 
      

      低版本ie不相容。 
      

      5、sticky?
      

      盒位置根據(jù)正常流計算(這稱為正常流動中的位置)，然後相對於該元素在流中的flow root（BFC）和containing block（最近的塊級祖先元素）定位。在所有情況下（即使被定位元素為 table 時），此元素定位均不對後續(xù)元素造成影響。當元素 B 被黏性定位時，後續(xù)元素的位置仍依照 B 未定位時的位置來決定。 position: sticky 對 table 元素的效果與 position: relative 相同。 
      

      同時sticky還有以下問題：
      

      1、sticky 不會觸發(fā) BFC。 
      

      2、樣式表 z－index 無效。行內(nèi) style 寫有效。 
      

      3、sticky 是容器相關(guān)的，也就說 sticky 的特性只會在他所處的容器裡生效。強調(diào)這一點是因為在實際使用中，碰到 body 設(shè)定 height：100% 的時候 sticky 元素停在某一個位置不動了。 
      

      三、測試程式碼
      

      測試程式碼的公共程式碼如下：
      <html html>
<head>
    <meta charset="utf-8">
    <title>position</title>
</head>
<style>
    .main-app{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .app-container {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #the-box{
        position: static;
        /* position: relative;
        top:100px;
        left:200px; */
    }
    .sub-box {
        width: 50px;
        height: 50px;
    }
</style>
 
<body>
    <div class="main-app">
        <div class="app-container">
            <div class="sub-box" style="background: gray;"></div>
            <div id="the-box" class="sub-box" style="background: green;"></div>
            <div class="sub-box" style="background: yellow;"></div>
            <div class="sub-box" style="background: red;"></div>
        </div>
    </div>
</body>
 
</html>
      我選定第二個元素作為我們本次的測試對象，測試環(huán)境為chrome 75版本。 
      1、static
      #the-box{
    position: static;
}
      結(jié)果：
      正常文件流程顯示
      詳解CSS中position屬性的用法
      2、relative
      #the-box{
    position: relative;
    top:100px;
    left:200px;
}
       
      結(jié)果：
      詳解CSS中position屬性的用法
      相對於自身原來的位置偏移所設(shè)定的位置，但是原來的位置被保留下來。 
      3、absolute
      #the-box{
    position: absolute;
    top: 100px; 
    left: 200px;
}
      結(jié)果：
      詳解CSS中position屬性的用法
      #原來固定的位置被別的元素佔用，由於父元素是非static（flex ），所以目前元素相對於父元素偏移所設(shè)定的位置。 
      4、sticky
      須指定 top, right, bottom 或 left 四個閾值其中之一，才可使黏性定位生效。否則其行為與相對定位相同。 
      此特性是元素固定在視窗的位置，如果頁面沒有滾動軸，將無法展示特性，此時，我們對它的父元素稍加更改，使頁面出現(xiàn)滾動軸。 
      .app-container {
    width: 100%;
    height: 3000px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#the-box{
    position: sticky;
    top: 100px;
}
      結(jié)果：
      詳解CSS中position屬性的用法
      當我們捲動頁面當元素距離頂部超過100px時，向下捲動時當前元素位置相對於視窗不變，此特性可以用作table固定表頭。 
      5、fixed
      對於ie7以下版本不能使用，其實就等於固定元素在瀏覽器視窗的位置。 
      #the-box{
    position: fixed;
    top: 100px;
    left: 200px;
}
      結(jié)果：
      

      詳解CSS中position屬性的用法
      

      無論如何捲動捲動軸，元素位置始終不變。 
      

      6、inherit
      #
      規(guī)定應(yīng)該從父元素繼承 position 屬性的值。 
      

      7、initial
      

      initial 關(guān)鍵字用於設(shè)定 CSS 屬性為它的預(yù)設(shè)值，可作用於任何 CSS 樣式。 （IE 不支援該關(guān)鍵字）
      

      8、unset
      

      #名如其意，unset 關(guān)鍵字我們可以簡單理解為不設(shè)定。其實，它是關(guān)鍵字 initial 和 inherit 的組合。 
      

      當我們給一個CSS 屬性設(shè)定了unset：
      

      如果該屬性是預(yù)設(shè)繼承屬性，則該值等同於inherit
      

      如果該屬性是非繼承屬性，則該值等同於initial
      

      9、revert
      

      暫時未列入規(guī)範。 
      以上是詳解CSS中position屬性的用法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
      


						
      
					
      
					
      
						
      本網(wǎng)站聲明
      
						
      本文內(nèi)容由網(wǎng)友自願投稿，版權(quán)歸原作者所有。本站不承擔相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)admin@php.cn
      
					
      
				
      

				



				
      


				
    


					


											
      
							
      
								
      
									
									
      熱AI工具
      
								
      
								
      
																		
      
											
												Undress AI Tool
											
											
      
												
													
      Undress AI Tool
      
												      
												
      免費脫衣圖片
      
											
      
										
      
																		
      
											
												Undresser.AI Undress
											
											
      
												
													
      Undresser.AI Undress
      
												      
												
      人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
      
											
      
										
      
																		
      
											
												AI Clothes Remover
											
											
      
												
													
      AI Clothes Remover
      
												      
												
      用於從照片中去除衣服的線上人工智慧工具。
      
											
      
										
      
																		
      
											
												Clothoff.io
											
											
      
												
													
      Clothoff.io
      
												      
												
      AI脫衣器
      
											
      
										
      
																		
      
											
												Video Face Swap
											
											
      
												
													
      Video Face Swap
      
												      
												
      使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
      
											
      
										
      
																
      
								
							
      
						
      
					


					


											
      
							
      
								
      
									
									
      熱工具
      
								
      
								
      
																		
      
											
												記事本++7.3.1
											
											
      
												
													
      記事本++7.3.1
      
												      
												
      好用且免費的程式碼編輯器
      
											
      
										
      
																			
      
											
												SublimeText3漢化版
											
											
      
												
													
      SublimeText3漢化版
      
												      
												
      中文版，非常好用
      
											
      
										
      
																			
      
											
												禪工作室 13.0.1
											
											
      
												
													
      禪工作室 13.0.1
      
												      
												
      強大的PHP整合開發(fā)環(huán)境
      
											
      
										
      
																			
      
											
												Dreamweaver CS6
											
											
      
												
													
      Dreamweaver CS6
      
												      
												
      視覺化網(wǎng)頁開發(fā)工具
      
											
      
										
      
																			
      
											
												SublimeText3 Mac版
											
											
      
												
													
      SublimeText3 Mac版
      
												      
												
      神級程式碼編輯軟體(SublimeText3)
      
											
      
										
      
																	
      
								
							
      
						
      
										

					
					
      
						
      
							
      
								
								
      熱門話題
      
							
      
							
      
															
      
									Laravel 教程
									
      
										
      
											
											1597
										
      
										
      
											
											29
										
      
									
      
								
      
															
      
									PHP教程
									
      
										
      
											
											1488
										
      
										
      
											
											72
										
      
									
      
								
      
														
      
							
						
      
					
      
				
      
			
      
							
      
					
      
						
						
      

													
      
								
									描述'垂直align”屬性及其典型用例
								
								描述'垂直align”屬性及其典型用例
								Jul 26, 2025 am	 07:35 AM
								
      1.ItAdjustSelementsLikeImagesRikeImagesOrformInputswithIntExtLineSustLineSlineSlineSlineSlikeLikeLikeBaseline，中間，Super，Super，Super和Sub.2.intablebecells，ItControlScontentalStalteNtalmscontentalMedwithThtop，Middle，Middle，Midder，Midder，經(jīng)常
      
							
      
														
      
								
									什麼是口音色的物業(yè)？
								
								什麼是口音色的物業(yè)？
								Jul 26, 2025 am	 09:25 AM
								
      accent-color是CSS中用於自定義復(fù)選框、單選按鈕和滑塊等表單元素高亮顏色的屬性；1.它直接改變表單控件選中狀態(tài)的默認顏色，如將復(fù)選框的藍色勾選標記改為紅色；2.支持的元素包括type="checkbox"、type="radio"和type="range"的輸入框；3.使用accent-color可避免複雜的自定義樣式和額外DOM結(jié)構(gòu)，保持原生可訪問性；4.現(xiàn)代瀏覽器普遍支持，舊瀏覽器需降級處理；5.設(shè)置accent-col
      
							
      
														
      
								
									如何將SCSS編譯到CSS？
								
								如何將SCSS編譯到CSS？
								Jul 27, 2025 am	 01:58 AM
								
      installdartsassvianpmafterinstallingnode.jsusingnpminstall-gsass.2.compilescsstocssssusingthecommandSassInput.scsssoutput.css.3。 useass  -  watchinput.scssoutput.csstoauto-compileonsave.4.watchentirefolderswithsass-watchscss：css.5.usepartialswith_prefixfo
      
							
      
														
      
								
									如何更改CSS中的文本顏色？
								
								如何更改CSS中的文本顏色？
								Jul 27, 2025 am	 04:25 AM
								
      要改變CSS中文本顏色，需使用color屬性；1.使用color屬性可設(shè)置文本前景色，支持顏色名稱（如red）、十六進制碼（如#ff0000）、RGB值（如rgb(255,0,0)）、HSL值（如hsl(0,100%,50%)）以及帶透明度的RGBA或HSLA（如rgba(255,0,0,0.5)）；2.可將顏色應(yīng)用於包含文本的任何元素，如h1至h6標題、段落p、鏈接a（需注意a:link、a:visited、a:hover、a:active不同狀態(tài)的顏色設(shè)置）、按鈕、div、span等；3.最
      
							
      
														
      
								
									CSS過渡教程
								
								CSS過渡教程
								Jul 26, 2025 am	 09:30 AM
								
      csStransitionSenablesMoothPropertyChangesWithMinimalCode，ifealforHoverForpectSandInteractiveFeedback.1.usethesyntaxtransition：propertyDurationTimingTiming-functionDelayDelay; TodefineTrysitions; TodefinEtrys;
      
							
      
														
      
								
									如何清除未使用的CSS？
								
								如何清除未使用的CSS？
								Jul 27, 2025 am	 02:47 AM
								
      UseAutomatedToolSlikePurgecsSoruncsStoscanAndRemoveUnusedcss; 2. integratePuratePurgingIntoyourBuildProcessviawebpack，vite，vite，ortailwind ’scontentConfiguration; 3.AuditcsSusageWithChroMedEvtoolScoverAgeTabBeforgeForgingToavoidRemovingNeedEdedStyles; 4.safelistdynamic
      
							
      
														
      
								
									html'樣式”標籤：內(nèi)聯(lián)與內(nèi)部CSS
								
								html'樣式”標籤：內(nèi)聯(lián)與內(nèi)部CSS
								Jul 26, 2025 am	 07:23 AM
								
      樣式放置方式需根據(jù)場景選擇。 1.Inline適合單元素臨時修改或JS動態(tài)控制，如按鈕顏色隨操作變化；2.內(nèi)部CSS適合頁面少、結(jié)構(gòu)簡單項目，便於集中管理樣式，如登錄頁基礎(chǔ)樣式設(shè)置；3.優(yōu)先考慮復(fù)用性、維護性及性能，大項目拆分外鏈CSS文件更優(yōu)。
      
							
      
														
      
								
									CSS過濾屬性示例
								
								CSS過濾屬性示例
								Jul 26, 2025 am	 08:08 AM
								
      thecssfilterPropertyAppliesVisalEffectStoElementsDirectlyIncss，withCommonSiNCluding：1.Blur（）forsofteningimagesorcreatingdepth，2.brightness（brightness（toadjustlightnessordNessordOrdNess）
      
							
      
													
      

													
								See all articles