您好,登錄后才能下訂單哦!
這篇文章主要講解了“CSS中Position屬性的功能”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“CSS中Position屬性的功能”吧!
position定位類型
定位元素(positionedelement)是其計(jì)算后位置屬性為relative,absolute,fixed或sticky的一個(gè)元素。
相對定位元素(relativelypositionedelement)是計(jì)算后位置屬性為relative的元素。
絕對定位元素(absolutelypositionedelement)是計(jì)算后位置屬性為absolute或fixed的元素。
粘性定位元素(stickilypositionedelement)是計(jì)算后位置屬性為sticky的元素。
大多數(shù)情況下,height和width被設(shè)定為auto的絕對定位元素,按其內(nèi)容大小調(diào)整尺寸。但是,被絕對定位的元素可以通過指定top和bottom,保留height未指定(即auto),來填充可用的垂直空間。它們同樣可以通過指定left和right并將width指定為auto來填充可用的水平空間。
除了剛剛描述的情況(絕對定位元素填充可用空間):
如果top和bottom都被指定(嚴(yán)格來說,這里指定的值不能為auto),top優(yōu)先。
如果指定了left和right,當(dāng)direction設(shè)置為ltr(水平書寫的中文、英語)時(shí)left優(yōu)先,當(dāng)direction設(shè)置為rtl(阿拉伯語、希伯來語、波斯語由右向左書寫)時(shí)right優(yōu)先。
position語法
position屬性被指定為從下面的值列表中選擇的單個(gè)關(guān)鍵字。
取值
static
該關(guān)鍵字指定元素使用正常的布局行為,即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時(shí)top,right,bottom,left和z-index屬性無效。
relative
該關(guān)鍵字下,元素先放置在未添加定位時(shí)的位置,再在不改變頁面布局的前提下調(diào)整元素位置(因此會(huì)在此元素未添加定位時(shí)所在位置留下空白)。position:relative對table-*-group,table-row,table-column,table-cell,table-caption元素?zé)o效。
absolute
不為元素預(yù)留空間,通過指定元素相對于最近的非static定位祖先元素的偏移,來確定元素位置。絕對定位的元素可以設(shè)置外邊距(margins),且不會(huì)與其他邊距合并。
感謝各位的閱讀,以上就是“CSS中Position屬性的功能”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對CSS中Position屬性的功能這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。