怎么使用CSS Position屬性

這篇文章主要介紹“怎么使用CSS Position屬性”，在日常操作中，相信很多人在怎么使用CSS Position屬性問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么使用CSS Position屬性”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

　　CSSPosition(定位)position屬性指定了元素的定位類型。position屬性的五個(gè)值:staticrelativefixedabsolutesticky元素可以使用的頂部,底部,左側(cè)和右側(cè)屬性.

　　position屬性瀏覽器支持

　　IE Firefox Chrome Safari Opera

　　所有主流瀏覽器都支持position屬性。

　　注釋：任何的版本的InternetExplorer（包括IE8）都不支持屬性值"inherit"。

　　position屬性定義和用法

　　position屬性規(guī)定元素的定位類型。

　　說(shuō)明

　　這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。

　　默認(rèn)值： static

　　繼承性： no

　　版本： CSS2

　　JavaScript語(yǔ)法： object.style.position="absolute"

　　可能的值

　　值 描述

　　absolute 

　　生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。

　　元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。

　　fixed 

　　生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

　　元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。

　　relative 

　　生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

　　因此，"left:20"會(huì)向元素的LEFT位置添加20像素。

　　static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。

　　inherit 規(guī)定應(yīng)該從父元素繼承position屬性的值。

　　TIY實(shí)例

　　定位：相對(duì)定位

　　本例演示如何相對(duì)于一個(gè)元素的正常位置來(lái)對(duì)其定位。

　　定位：絕對(duì)定位

　　本例演示如何使用絕對(duì)值來(lái)對(duì)元素進(jìn)行定位。

　　定位：固定定位

　　本例演示如何相對(duì)于瀏覽器窗口來(lái)對(duì)元素進(jìn)行定位。

　　設(shè)置元素的形狀

　　本例演示如何設(shè)置元素的形狀。此元素被剪裁到這個(gè)形狀內(nèi)，并顯示出來(lái)。

　　Z-index

　　Z-index可被用于將在一個(gè)元素放置于另一元素之后。

　　Z-index

　　上面的例子中的元素已經(jīng)更改了Z-index。

到此，關(guān)于“怎么使用CSS Position屬性”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！