溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何在css中設置position屬性值，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
首先是不設置position屬性，可以看到two元素的top的屬性并未生效，而顏色屬性是有效的，當前位置是默認文檔流中的位置，以此為原型對比position改變時的元素位置的變化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./j.css"> </head> <body> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> </div> </body> </html>
.box {
display: inline-block;
background: red;
color: white;
}
#two {
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
position：static
在#two的類下添加position：static;如下（后面每處只修改position的值）
#two {
position:static;
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
HTML元素的默認值，即沒有定位，元素出現在正常的流中。
靜態定位的元素不會受到 top, bottom, left, right影響。
這個值既然會使定位屬性失效，那么它存在的意義是什么的？
在網頁樣式修改的過程中，可以暫時的屏蔽某些元素的位置信息，或者在修改的時候，保留，某些部分的位置信息，便于恢復。
position：relative
相對定位，相對與原來正常文檔流的位置定位，但是在定位時不改變原來的頁面布局，既是相當于只是把定位的元素進行了移動，而移動的對比標準位置就是正常文檔流中的位置，而原來的位置會留白。
position ：absolute
絕對定位，該元素將從普通文檔流中刪除，并且不會為頁面布局中的元素創建空間。他相對于最近已定位的父元素定位。例子中即是根據body元素來定位的。
position ：fixed
固定定位，所謂固定定位和絕對定位相似，一樣都會從普通文檔流中刪除，并且不會為頁面布局中的元素創建空間；不一樣的是它是固定在視窗上的，是以視窗為定位對象的的，相信大家瀏覽很多網頁時都有這樣的感受，網頁上部或者下部會有廣告不會隨著網頁的上下滾動而移動，它們是固定在網頁上的，并且如果沒有設置z-index來修該疊放次序，它們會覆蓋網頁的內容。
position ：sticky
該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設置了top: 20px，那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。
元素固定的相對偏移是相對于離它最近的具有滾動框的父元素，如果父元素都不可以滾動，那么是相對于viewport來計算元素的偏移量
css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
關于如何在css中設置position屬性值就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
