溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)如何在css中設(shè)置position屬性值，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
首先是不設(shè)置position屬性，可以看到two元素的top的屬性并未生效，而顏色屬性是有效的，當(dāng)前位置是默認(rèn)文檔流中的位置，以此為原型對比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元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中。
靜態(tài)定位的元素不會受到 top, bottom, left, right影響。
這個值既然會使定位屬性失效，那么它存在的意義是什么的？
在網(wǎng)頁樣式修改的過程中，可以暫時的屏蔽某些元素的位置信息，或者在修改的時候，保留，某些部分的位置信息，便于恢復(fù)。
position：relative
相對定位，相對與原來正常文檔流的位置定位，但是在定位時不改變原來的頁面布局，既是相當(dāng)于只是把定位的元素進(jìn)行了移動，而移動的對比標(biāo)準(zhǔn)位置就是正常文檔流中的位置，而原來的位置會留白。
position ：absolute
絕對定位，該元素將從普通文檔流中刪除，并且不會為頁面布局中的元素創(chuàng)建空間。他相對于最近已定位的父元素定位。例子中即是根據(jù)body元素來定位的。
position ：fixed
固定定位，所謂固定定位和絕對定位相似，一樣都會從普通文檔流中刪除，并且不會為頁面布局中的元素創(chuàng)建空間；不一樣的是它是固定在視窗上的，是以視窗為定位對象的的，相信大家瀏覽很多網(wǎng)頁時都有這樣的感受，網(wǎng)頁上部或者下部會有廣告不會隨著網(wǎng)頁的上下滾動而移動，它們是固定在網(wǎng)頁上的，并且如果沒有設(shè)置z-index來修該疊放次序，它們會覆蓋網(wǎng)頁的內(nèi)容。
position ：sticky
該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
當(dāng)元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。亦即如果你設(shè)置了top: 20px，那么在sticky元素到達(dá)距離相對定位的元素頂部50px的位置時固定，不再向上移動。
元素固定的相對偏移是相對于離它最近的具有滾動框的父元素，如果父元素都不可以滾動，那么是相對于viewport來計算元素的偏移量
css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
關(guān)于如何在css中設(shè)置position屬性值就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼