在網(wǎng)頁(yè)設(shè)計(jì)中，你放內(nèi)容的地方和你放內(nèi)容的方式一樣重要。位置可以影響用戶體驗(yàn)的各個(gè)方面，在web前端培訓(xùn)中，您將了解CSS
位置屬性以及它如何與HTML頁(yè)面上的元素一起工作。
CSS位置屬性是做什么的?
CSS
位置屬性幫助您定義要在HTML頁(yè)面上獲取的元素的位置。CSS位置屬性有六個(gè)值，您可以分配給它來(lái)確定定義的位置。了解這些值之間的差異可以讓你知道在哪里和何時(shí)使用它們。
CSS位置：靜態(tài)值
這是CSS位置屬性的默認(rèn)值。在這種模式下，目標(biāo)元素與自然文檔流一起定位。請(qǐng)注意，頂部、右側(cè)、底部、左側(cè)以及Z索引屬性不會(huì)顯示任何效果。
CSS位置：相對(duì)值
該位置值與靜態(tài)值非常相同，但是，該值允許上述方向?qū)傩詫?duì)目標(biāo)元素的位置產(chǎn)生影響。方向?qū)傩詫⒃貜钠湓谖臋n中相對(duì)于其自身屬性(例如左側(cè)或底部)的自然位置移動(dòng)。偏移量不影響任何其他元素的位置。想要對(duì)CSS有更多的了解，建議參加web前端培訓(xùn)，可以有更全面的認(rèn)識(shí)和理解。
CSS位置：固定值
使用此位置值，目標(biāo)元素將不包括在自然文檔流中。這意味著文件不會(huì)像通常那樣為布局中的元素固有地創(chuàng)造空間。這些元素相對(duì)于文檔或初始包含塊放置，除非其中一個(gè)祖先將轉(zhuǎn)換、透視或篩選器屬性設(shè)置為非任何對(duì)象(請(qǐng)參閱CSS轉(zhuǎn)換規(guī)范)，在這種情況下，祖先充當(dāng)包含塊。值得注意的是，滾動(dòng)不會(huì)影響具有此CSS位置值的元素。一個(gè)固定的元素不會(huì)在頁(yè)面上留下它通常所在的位置的空白。
CSS位置：絕對(duì)值
與固定值一樣，具有絕對(duì)值的元素將從自然文檔流中刪除，并且在頁(yè)面布局中不會(huì)為元素創(chuàng)建空間。元素將根據(jù)最近放置的祖先元素進(jìn)行定位。如果該選項(xiàng)不可用，則元素將使用文檔主體并隨頁(yè)面滾動(dòng)一起移動(dòng)。Web前端培訓(xùn)有很多關(guān)于CSS的課程，感興趣的同學(xué)可以報(bào)名學(xué)習(xí)一下，有專(zhuān)業(yè)講師面授指導(dǎo)教學(xué)，相信會(huì)更容易快速掌握這些知識(shí)。
CSS位置：粘性值
使用粘性值，目標(biāo)元素從HTML文檔的自然流接收其位置。位置的改變是從最近的滾動(dòng)祖先元素及其包含塊中進(jìn)行的。從某種意義上說(shuō)，這個(gè)值在達(dá)到“粘滯”點(diǎn)之前與“相對(duì)”相同，偏移量不會(huì)影響任何其他元素的位置。你可以把它看作是相對(duì)值和固定值的混合體。
理解Z索引屬性
Z索引屬性處理重疊或可能重疊的元素的位置，這取決于頁(yè)面的布局，這個(gè)位置處理元素相互堆疊的方式，它有助于保持對(duì)要顯示的元素的可見(jiàn)焦點(diǎn)。用一個(gè)較大的Z索引覆蓋那些用較小的Z索引覆蓋的重疊元素。
把頁(yè)面上的元素想象成一張卡片。你把其中四個(gè)放下來(lái)，但要確保王牌總是在最上面顯示什么。Z索引屬性可以更改堆棧順序。
每個(gè)元素都有一個(gè)位置值。請(qǐng)記住，默認(rèn)值設(shè)置為靜態(tài)。任何具有其位置值更改為靜態(tài)以外的任何元素都將顯示設(shè)置為靜態(tài)的元素。Z索引僅適用于已定位的元素(位置：絕對(duì)，位置：相對(duì)，位置：固定，位置：粘滯)和彎曲元素(顯示的直接子元素：彎曲元素)。否則，所有元素都會(huì)出現(xiàn)在頁(yè)面上，好像它們的位置值設(shè)置為靜態(tài);因此，與Z指數(shù)無(wú)關(guān)。
盡管CSS提供了所有的工具，但有時(shí)很難掌握您控制的內(nèi)容。想要更熟練地使用CSS技能，不妨去web前端培訓(xùn)去學(xué)習(xí)，那里有更加系統(tǒng)規(guī)范的課程，讓你獲得全面提升。
