css中如何使用position設(shè)置元素的定位方式-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)css中如何使用position設(shè)置元素的定位方式，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的做網(wǎng)站、成都做網(wǎng)站，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10多年品質(zhì)，值得信賴！

一、簡(jiǎn)介

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 屬性無(wú)效。

relative

使用這個(gè)關(guān)鍵字來(lái)布局元素就好像這個(gè)元素沒(méi)有被設(shè)置過(guò)定位一樣。即會(huì)適應(yīng)該元素的位置，并不改變布局（這樣會(huì)在此元素原本所在的位置留下空白）。position:relative對(duì)table-*-group, table-row, table-column, table-cell, table-caption無(wú)效。

absolute

不為元素預(yù)留空間，元素位置通過(guò)指定其與它最近的非static定位的祖先元素的偏移來(lái)確定。絕對(duì)定位的元素可以設(shè)置外邊距（margins），并且不會(huì)與其他邊距合并。

fixed

不為元素預(yù)留空間。通過(guò)指定相對(duì)于屏幕視窗的位置來(lái)指定元素的空間，并且該元素的位置在屏幕滾動(dòng)時(shí)不會(huì)發(fā)生改變。打印時(shí)元素會(huì)出現(xiàn)在的每頁(yè)的固定位置。fixed屬性通常會(huì)創(chuàng)建新的棧環(huán)境。

關(guān)于“css中如何使用position設(shè)置元素的定位方式”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章名稱：css中如何使用position設(shè)置元素的定位方式-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://bm7419.com/article10/ijdgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)