[華為云在線課程][大話CSS][學習筆記][第6章][CSS定位]

6.1，定位屬性

定位屬性

定位屬性用于設置元素在頁面中的位置

使用position屬性來表示定位

它的值可以設置為：static、relative、absolute、fixed

默認值為static，表示標準流布局

定位位置

在使用定位屬性定位元素位置的時候，可以指定上下左右四個屬性來控制元素的位置

top用于設置元素定位時距離上部的偏移距離

bottom用于設置元素定位時距離下部的偏移距離

left用于設置元素定位時距離左側的偏移距離

right用于設置元素定位時距離右側的偏移距離

需要注意的是，偏移量可以為負值

層次

可以使用屬性z-index設置定位元素的層級，值越大，顯示時越是覆蓋在其他元素的上邊

z-index屬性默認值為auto，代表層級與父元素相同

該屬性只在position值為absolute時有效

例如：

6.2，相對定位

什么是相對定位

相對定位是指元素相對于標準文檔流中的默認位置來進行定位的

當position屬性值設置為relative時，開啟相對定位模式

相對定位并不會讓元素脫離標準流

相對定位不會影響到周圍其他元素的排布

實際使用時相對定位一般都是和位置屬性一起使用

例如

6.3，絕對定位

什么是絕對定位

相對于除static定位之外的第一個父元素進行定位，如果沒有就相對于頁面定位

把position屬性的值設置為absolute時，代表開啟絕對定位模式

被設置為絕對定位的元素會脫離標準流

當多個絕對定位元素出現相互覆蓋的情況時，可以使用z-index屬性設置層級

絕對定位和相對定位搭配使用

情景：當我們想要讓子元素相對于父元素進行絕對定位時，可以在父元素上使用相對定位

CSS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。