css position 設(shè)置元素的定位方式詳解
我要評(píng)論一、簡介
CSS的 position 屬性設(shè)置元素的定位方式，為將要定位的元素定義定位規(guī)則。該屬性對(duì)腳本編寫動(dòng)畫特效十分有用。
1、定位元素（positioned element)是計(jì)算后位置屬性分為： relative（相對(duì)）、absolute（絕對(duì)） 、 fixed（固定） 或 sticky （粘性）的元素。
2、top 、right、bottom、left屬性指定定位元素的位置。
3、Z-index 設(shè)置定位元素的疊層順序，也就是在z軸的位置，值可以為正負(fù)數(shù)，值越大離用戶越近（也就是顯示的層次越往上），值越小離用戶遠(yuǎn)。
如圖：z-index的值為-1時(shí)，圖片的位置在文字的下方，離用戶遠(yuǎn)，而若把z-index的值設(shè)置為正數(shù)，圖片的位置就顯示在文字的上方，覆蓋部分文字！
而若把z-index的值設(shè)置為正數(shù)，圖片的位置就顯示在文字的上方，覆蓋部分文字！left:20px;是圖片離左邊邊框的距離為20px； top:20px;是圖片離頂部的距離為20px
二、取值
static
這個(gè)關(guān)鍵字使得這個(gè)元素使用正常的表現(xiàn)，即元素處在文檔流中它當(dāng)前的布局位置，top, right, bottom, left 和 z-index 屬性無效。
relative
使用這個(gè)關(guān)鍵字來布局元素就好像這個(gè)元素沒有被設(shè)置過定位一樣。即會(huì)適應(yīng)該元素的位置，并不改變布局（這樣會(huì)在此元素原本所在的位置留下空白）。position:relative對(duì)table-*-group, table-row, table-column, table-cell, table-caption無效。
absolute
不為元素預(yù)留空間，元素位置通過指定其與它最近的非static定位的祖先元素的偏移來確定。絕對(duì)定位的元素可以設(shè)置外邊距（margins），并且不會(huì)與其他邊距合并。
fixed
不為元素預(yù)留空間。通過指定相對(duì)于屏幕視窗的位置來指定元素的空間，并且該元素的位置在屏幕滾動(dòng)時(shí)不會(huì)發(fā)生改變。打印時(shí)元素會(huì)出現(xiàn)在的每頁的固定位置。fixed屬性通常會(huì)創(chuàng)建新的棧環(huán)境。
以上這篇css position 設(shè)置元素的定位方式詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了CSS中的元素定位方法詳解,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-21
- 這篇文章主要介紹了詳解CSS 子元素相對(duì)于父元素固定定位解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-09-03
css子元素相對(duì)父元素進(jìn)行定位的實(shí)現(xiàn)
這篇文章主要介紹了css子元素相對(duì)父元素進(jìn)行定位的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-09-02- 網(wǎng)頁制作Webjx文章簡介：position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)2009-04-02
CSS元素定位之通過元素的標(biāo)簽或者元素的id、class屬性定位詳解
這篇文章主要介紹了CSS元素定位之通過元素的標(biāo)簽或者元素的id、class屬性定位，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的2022-09-08
