99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

1、為什么要定位

先看看以下這些場(chǎng)景是否可以用標(biāo)準(zhǔn)流或浮動(dòng)實(shí)現(xiàn)
（1）某個(gè)元素可以自由的在一個(gè)盒子內(nèi)移動(dòng)位置，并且壓住其他盒子
（2）滾動(dòng)窗口時(shí)，某些盒子是可以固定在屏幕某個(gè)位置的
以上這種場(chǎng)景使用標(biāo)準(zhǔn)流和浮動(dòng)無(wú)法快速實(shí)現(xiàn)，此時(shí)需要引入定位進(jìn)行實(shí)現(xiàn)
浮動(dòng)：可以讓多個(gè)塊級(jí)盒子一行沒(méi)有縫隙排列展示，經(jīng)常用于橫向排列盒子
定位：可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或固定屏幕中某個(gè)位置，并且可以壓住其他盒子

赤峰林西ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！2、定位組成

定位：將盒子定在某個(gè)位置，定位也是在擺放盒子，按照定位的方式移動(dòng)盒子
定位=定位模式+邊偏移
定位模式：用于指定一個(gè)元素在文檔中的定位方式
邊偏移：決定了該元素的最終位置

2.1 定位模式

決定元素的定位方式，通過(guò)css設(shè)置position屬性

值	語(yǔ)義
static	靜態(tài)定位
relative	相對(duì)定位
absolute	絕對(duì)定位
fixed	固定定位

2.1.1 靜態(tài)定位static

元素默認(rèn)的定位方式，無(wú)定位的意思。還是按照標(biāo)準(zhǔn)流特性擺放位置，沒(méi)有邊偏移
因此定位在布局中很少用到

div{position:static;
}

2.1.2 相對(duì)定位relative(***)

相對(duì)定位是元素在移動(dòng)位置時(shí)，是相對(duì)于它原來(lái)的位置來(lái)說(shuō)的
（1）參照點(diǎn)是自己原來(lái)的位置(left:10px,表示左邊相對(duì)于原來(lái)的位置偏移了10px)
（2）原來(lái)在標(biāo)準(zhǔn)流的位置繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它（不脫標(biāo)，繼續(xù)保留原來(lái)位置，與浮動(dòng)不同 ）
（3）相對(duì)定位可以用來(lái)限制絕對(duì)定位

div{position:relative;
}

原來(lái)：

相對(duì)偏移之后：

2.1.2 絕對(duì)定位（***）

絕對(duì)定位是元素在移動(dòng)位置時(shí)，相對(duì)于它的祖先元素來(lái)說(shuō)的
語(yǔ)法：

div{
	position:absolute;
}

特點(diǎn)：
（1）沒(méi)有祖先元素或祖先元素沒(méi)有定位，則以瀏覽器為準(zhǔn)定位，見(jiàn)示例（1.1）和（1.2）
（2）如果祖先元素有定位（相對(duì)、絕對(duì)、固定定位），則以最近一級(jí)的有定位的祖先元素為參考點(diǎn)移動(dòng)位置，見(jiàn)示例（2.1）
（3）絕對(duì)定位會(huì)脫標(biāo)，不再占用原先位置。其他標(biāo)準(zhǔn)流元素會(huì)占用原來(lái)絕對(duì)定位元素所在的位置 ,見(jiàn)示例（3.1）
（1.1）沒(méi)有祖先元素：以瀏覽器為準(zhǔn)定位

（1.2）有祖先元素，但祖先元素沒(méi)有定位：以瀏覽器為準(zhǔn)定位

（2.1）祖先元素有定位，以最近一級(jí)有定位的祖先元素作為參考
grandfather>father>son
grandfather有定位，father無(wú)定位

grandfather
father
 
son

（3.1）絕對(duì)定位的元素會(huì)脫標(biāo)

box1
box2

添加絕對(duì)定位之前：

添加絕對(duì)定位之后：脫標(biāo)

2.1.3 固定定位fixed(***)

固定定位是元素固定于瀏覽器可視區(qū)的位置。
主要使用場(chǎng)景：可以在瀏覽器頁(yè)面滾動(dòng)時(shí)，元素的位置不會(huì)改變
特點(diǎn)：

(1)以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素
和父元素沒(méi)有關(guān)系
不隨滾動(dòng)而滾動(dòng)
(2)固定定位不占用原先的位置（脫標(biāo)）
固定定位可以看作是特殊的絕對(duì)定位

div{
	position:fixed;
}

加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油

fixed固定定位

技巧：固定定位搭配版心右側(cè)

算法：
（1）讓固定定位的盒子left:50%,走到瀏覽器可視區(qū)的一半位置（版心）
（2）讓固定定位的盒子margin-left:版心寬度的一半距離。版心右側(cè)

fixed固定到版心

2.1.4 粘性定位sticky

粘性定位可以看作是相對(duì)定位和固定定位的混合
實(shí)際不常用，IE不兼容。現(xiàn)在網(wǎng)頁(yè)上看到的類似粘性定位的一般都是使用js實(shí)現(xiàn)

div{
position:sticky;
top:10px;
}

特點(diǎn)：
（1）以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）
（2）粘性定位占用原先位置（相對(duì)定位特點(diǎn)）
（3）必須添加top\bottom\left\right其中一個(gè)屬性才生效

導(dǎo)航欄粘性定位

粘性定位sticky

2.2 邊偏移

絕對(duì)盒子最終移動(dòng)到什么位置
有top\bottom\left\right4個(gè)屬性

邊偏移屬性	示例	描述
top	top:80px	頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離
bottom	bottom:80px	底部偏移量，定義元素相對(duì)其父元素下邊線的距離
left	left:80px	左側(cè)偏移量，定義元素相對(duì)其父元素左邊線的距離
right	right:80px	右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離

3、子絕父相

子元素是絕對(duì)定位的話，父元素要用相對(duì)定位。
（1）子元素絕對(duì)定位，不會(huì)占用位置，可以放到父盒子的任何一個(gè)地方，不會(huì)影響其他的兄弟盒子
（2）父盒子需要加定位限制子盒子在父盒子內(nèi)顯示，否則子盒子就會(huì)以瀏覽器為基準(zhǔn)進(jìn)行偏移
（3）父盒子布局時(shí)，需要占有位置，因此選擇絕對(duì)定位（不脫標(biāo)）
總結(jié)：父級(jí)需要占用位置，因此是相對(duì)定位。子盒子不用占用位置，就是絕對(duì)定位

注意：子絕父相不是永遠(yuǎn)不變，如果父元素不需要站位置，子絕父絕也是可以的

4、定位的疊放順序 z-index

在使用定位布局時(shí)，可能會(huì)出現(xiàn)盒子重疊的情況。此時(shí)可以使用z-index控制盒子的前后次序（z軸）

div{
	z-index:1; 
}

（1）數(shù)值可以是正整數(shù)、負(fù)整數(shù)或0.默認(rèn)是auto,數(shù)值越大，盒子越靠上
（2）如果屬性值相同，則按照書(shū)寫(xiě)順序，后來(lái)居上
（3）z-index值沒(méi)有單位‘
（4）只有定位的盒子才有z-index屬性

one
two
three

5、定位的拓展 5.1 絕對(duì)定位的盒子居中

加了絕對(duì)定位的盒子不能通過(guò)margin:0 auto實(shí)現(xiàn)水平居中
實(shí)現(xiàn)方法：
（1）需要定位的盒子挪到父盒子的50%
（2）需要定位的盒子向左挪動(dòng)本身的一半寬度

5.2 定位特殊特性

絕對(duì)定位和固定定位與浮動(dòng)類似
（1）行內(nèi)元素添加絕對(duì)定位或固定定位，可以直接設(shè)置高度和寬度
（2）塊級(jí)元素添加絕對(duì)或固定定位，如果不給寬度或高度，默認(rèn)大小是內(nèi)容的大小

span
div內(nèi)容

5.3 脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷

浮動(dòng)元素、絕對(duì)定位（固定定位）元素都不會(huì)觸發(fā)外邊距合并的問(wèn)題

5.4 絕對(duì)（固定）定位會(huì)完全壓住盒子

（1）絕對(duì)（固定）定位元素會(huì)壓住下面的標(biāo)準(zhǔn)流盒子及盒子中的文字圖片

我是標(biāo)準(zhǔn)流

（2）與浮動(dòng)元素不同，浮動(dòng)元素只會(huì)壓住它下面標(biāo)準(zhǔn)流的盒子，但是不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里的文字或圖片
原因：浮動(dòng)產(chǎn)生的目的是做文字環(huán)繞效果的

我是標(biāo)準(zhǔn)流

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

當(dāng)前文章：17.前端筆記-CSS-定位-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.ef60e0e.cn/article/cchjoi.html