其實(shí)在HTML和CSS的學(xué)習(xí)中，css的position屬性應(yīng)該是難點(diǎn)之一，難在你需要靜下心來(lái)仔細(xì)搞清楚它的每一個(gè)值的意義、效果和用法。但是它的功能很強(qiáng)大，效果也是很令人驚艷的，因?yàn)槟憧梢杂盟?shí)現(xiàn)一些float很難去實(shí)現(xiàn)的定位效果，比如下圖：

等等，今天我們就以第一個(gè)圖的樣式為例，講講position的用法。

首先定義一個(gè)div，然后在里面插入底層圖片

(其中center-block是Bootstrap自帶的居中類)

CSS定義：

.Service_pic{

margin-top: 100px;

position: relative;

}

.Service_pic_img{

width: 30%;

}

Service_pic類的margin-top設(shè)置只是為了讓它與頂部有一定的距離，這樣比較美觀。Service_pic_img的寬度定義則是為了讓圖片寬度變成總div寬度的30%，height則隨著圖片寬度大小按比例縮放。這里的Service_pic還設(shè)置了position屬性，其屬性值為relative。

那么這里我們要說(shuō)明一下，position屬性的默認(rèn)值是static，就是說(shuō)當(dāng)你沒(méi)有定義position屬性的值的時(shí)候，元素的position值就是static。

官方解釋static：默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。也就是說(shuō)你不能給position：static的元素定義top, bottom, left, right 或者 z-index 屬性，它們是無(wú)效的。

官方解釋relative：

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

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

也就是說(shuō)當(dāng)你不給position：relative定義top, bottom, left, right值的時(shí)候，它跟原來(lái)的位置是沒(méi)有任何區(qū)別的。

那么我們這里是給外面的div定義了一個(gè)position：relative的值的，但是卻沒(méi)有給出其?top, bottom, left, right 或者 z-index 屬性定義，這是為什么呢？后面你就知道了哈哈

這里要注意的一點(diǎn)是relative是不脫離文檔流的，也就是說(shuō)無(wú)論你把它移動(dòng)到哪里，它原有的位置還是會(huì)留著的。

生成效果如下圖：

然后當(dāng)然就是把圖片文字啥的加進(jìn)去，代碼如下：

0 1

需求分析

效果如下圖：

最后當(dāng)然是來(lái)調(diào)整最后的樣式啦，代碼如下：

.step1{

font-family: DIN Condensed;

color: #494949;

}

.step1_num{

position: absolute;

top:-0.1%;

left: 60.4%;

color: white;

font-size: 4rem;

}

.step1_header{

position: absolute;

top:0.2%;

left: 68%;

font-size: 2.5rem;

}

.step1_img{

position: absolute;

top:-4%;

left: 21.6%;

width: 19%;

}

其中step1類是最外層的div，定義字體的樣式和顏色。

step1_num?類定義的是數(shù)字

的位置與樣式，字體大小和顏色這些我們就先不說(shuō)了，我們來(lái)說(shuō)說(shuō)position: absolute。

官方解釋?absolute：

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

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

通過(guò)上文我們知道，position的默認(rèn)值是static，那么也就是說(shuō)，absolute只會(huì)根據(jù)非static的第一個(gè)父元素進(jìn)行定位。舉例則為，h3 .step1_num采用了position: absolute，而它的父元素div .step1是采用position默認(rèn)值static的，所以h3?.step1_num并不會(huì)相對(duì)div .step1進(jìn)行定位。所以h3 .step1_num會(huì)繼續(xù)向他的上一級(jí)父元素查找，直到找到div .Service_pic這個(gè)采用position: relative;定位的父元素以后，h3 .step1_num才會(huì)根據(jù)他定位。否則它就一直查找上去，如果最終還是沒(méi)找到position不為static的元素，就以瀏覽器窗口為基準(zhǔn)定位。再貼一下代碼你們自己琢磨一下：

0 1

需求分析

所以一開(kāi)始我們把最外層的div .Service_pic設(shè)置成position: relative;是因?yàn)槲覀兿胱屍渲械膬?nèi)容(div .step1)根據(jù)這個(gè)div .Service_pic的位置進(jìn)行定位而不是最外層的瀏覽器窗口，這樣子當(dāng)窗口和圖片都縮放的時(shí)候才不會(huì)產(chǎn)生錯(cuò)位。

div .Service_pic采用position: relative;的原因是?relative相對(duì)于其正常位置進(jìn)行定位，而我們并不需要div .Service_pic有任何位移，只需要它呆在原來(lái)的地方，為它的子元素提供一個(gè)定位的基準(zhǔn)。

那你可能會(huì)問(wèn)干嘛那么麻煩，直接把div .step1設(shè)置成position: relative;不就好了嘛。但是你別忘了position: relative;是不脫離文本流的，下面幾個(gè)白大洞這樣好看？

對(duì)這里還要說(shuō)position: absolute是脫離文本流的，也就是正常文本中并不會(huì)為它保留位置，有點(diǎn)像float但又比f(wàn)loat好控制。

然后效果如下圖：

(位置和大小只能自己慢慢調(diào)整一下咯)

這個(gè)頁(yè)面的后幾步內(nèi)容與方法大體相同，這里不再贅述。

position一共有五種值：absolute、relative、static、inherit、fixed

前面三種我們一般用的比較多，前面也介紹過(guò)了，最后來(lái)說(shuō)說(shuō)inherit與fixed

fixed：

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

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

position屬性的fixed值比較煩，我們?cè)诤芏嗑W(wǎng)站上看到那種往下拉滑動(dòng)條還在同一個(gè)位置的小廣告就是用它做的，因?yàn)樗鶕?jù)瀏覽器窗口進(jìn)行定位，所以無(wú)論內(nèi)容如何改變它的位置都是不能動(dòng)搖的。

inherit

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

inherit其實(shí)沒(méi)啥好說(shuō)的，它父元素的position是啥值它就是啥值。

今天的分享就到這里！每天進(jìn)步多一點(diǎn)，每天都有好心情！

css position的使用

css position的使用 css 的 position 屬性是用來(lái)設(shè)置元素的位置的,它還能設(shè)置一個(gè)元素出現(xiàn)在另一個(gè)元素的下層元素能用 top,bottom,left 和 right 屬性設(shè)置位置 ...

CSS position絕對(duì)定位absolute relative

常常使用position用于層的絕對(duì)定位,比如我們讓一個(gè)層位于一個(gè)層內(nèi)具體什么位置,為即可使用position:absolute和position:relative實(shí)現(xiàn). 一.position語(yǔ)法與結(jié) ...

jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

定位應(yīng)用:點(diǎn)擊一個(gè)按鈕,然后在按鈕的右邊彈出一個(gè)提示框 1,提示框相對(duì)于屏幕進(jìn)行定位,那么使用offset來(lái)取得當(dāng)前按鈕相對(duì)于body的top和left,然后通過(guò)$('body').prepend(t ...

[CSS]position定位

CSS position 屬性 通過(guò)使用?position 屬性,我們可以選擇 4 種不同類型的定位,這會(huì)影響元素框生成的方式. position 屬性值的含義: static 元素框正常生成.塊級(jí)元 ...

jQuery css,position,offset,scrollTop,scrollLeft用法

jQuery css,position,offset,scrollTop,scrollLeft用法:

CSS position(定位)屬性

關(guān)于CSS position,來(lái)自MDN的描述: CSS position屬性用于指定一個(gè)元素在文檔中的定位方式.top.right.bottom.left?屬性則決定了該元素的最終位置. 然后來(lái)看看 ...

CSS position &居中(水平，垂直)

css position是個(gè)很重要的知識(shí)點(diǎn): 知乎Header部分: 知乎Header-inner部分: position屬性值: fixed:生成絕對(duì)定位的元素,相對(duì)瀏覽器窗口進(jìn)行定位(位置可通過(guò): ...

CSS position屬性absolute relative等五個(gè)值的解釋

DIV CSS?position絕對(duì)定位absolute relative教程篇 常常使用position用于層的絕對(duì)定位,比如我們讓一個(gè)層位于一個(gè)層內(nèi)具體什么位置,為即可使用position:abs ...

前端開(kāi)發(fā)必知必會(huì)：CSS Position 全解析

此文根據(jù)Steven Bradley的所譯,整個(gè)譯文帶有我自己的理解與思想,如果譯得不好或不對(duì)之處 ...

jquery 獲取css position的值

jquery 獲取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示

總結(jié)

以上是生活随笔為你收集整理的如何使html中的din居中,HTML+CSS－－position大法好的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。