Normal flow
默認(rèn)情況下，元素都是按照normal flow（標(biāo)準(zhǔn)流、常規(guī)流、正常流、文檔流【document flow】）進(jìn)行定位
default: 不存在層疊現(xiàn)象
標(biāo)準(zhǔn)流一般是通過margin padding進(jìn)行定位
脫標(biāo)元素使用position: fixed和absolute定位
使用margin/padding定位的缺點(diǎn)
1. 設(shè)置一個(gè)元素的margin或者padding，通常會(huì)影響到標(biāo)準(zhǔn)流中其他元素的定位效果
2. 不便于實(shí)現(xiàn)元素層疊的效果(可將margin設(shè)置為負(fù)數(shù)實(shí)現(xiàn), 缺陷是會(huì)影響其他元素)
- 引入position, 可實(shí)現(xiàn)層疊效果
position相對(duì)定位 重點(diǎn)且常用
利用position可以對(duì)元素進(jìn)行相對(duì)定位
static：靜態(tài)定位 default
relative：相對(duì)定位 p:r
absolute：絕對(duì)定位 相對(duì)于自己原來的位置定位
fixed：固定定位 相對(duì)于viewport fixed
relative 參照原來自己的位置進(jìn)行定位
//使用方式
position: relative;
left:10px;
原來占據(jù)的空間還在,所以還是屬于normal flow
containing block
left:50%;
img, 是*containing block(包含它的div)的值
若是文字,是*font-size的值
relative 應(yīng)用: 使用sub/sup設(shè)置上下標(biāo)
sub, sup{
font-size: 0.5em;
}
/*設(shè)置下標(biāo)*/
sub{
/*使用的好處,適配不同的font-size*/
position: relative;
/*top: -4px;*/
/* 0.4*10px 使得無論自己的font-size怎么變都會(huì)底部平齊*/
top: -0.4em;
}</pre>
relative 應(yīng)用2 顯示重要大圖 使用img標(biāo)簽
水平垂直居中
img寬度或者高度超出父元素, 不能用text-align:center;
div{
overflow: hidden;
min-width: 1100px;
}
img{
position: relative;
/*希望能夠得到根據(jù)父元素改變的功能*/
/*通過兩個(gè)屬性實(shí)現(xiàn)*/
/*相對(duì)于containing-block(50%)*/
left: 50%;
margin-left: -960px;
/*left: -960px;*/
/*margin-left: 50%;*/
}</pre>
<div>
<img src="images/mhxy.jpg" alt="">
</div></pre>
有兩種方法的深層原因: margin-left和left都是相對(duì)于containing block, 并且都能設(shè)置為負(fù)數(shù)
實(shí)際上四種方法 margin-right/ right
containing block一般指的是父元素, except float.
脫標(biāo)元素的水平垂直居中公式: 絕對(duì)定位技巧
重要大圖垂直居中同理
fixed 脫離標(biāo)準(zhǔn)流
因?yàn)槊摌?biāo)所以會(huì)懸浮在最上層, 并且不占位置
可以通過left、right、top、bottom進(jìn)行定位. 注意沒有center
定位參照對(duì)象是視口（viewport）
當(dāng)畫布滾動(dòng)時(shí)，固定不動(dòng)
視口（Viewport）文檔的可視區(qū)域
畫布（Canvas）用于渲染文檔的區(qū)域
文檔內(nèi)容超出視口范圍，可以通過滾動(dòng)查看
畫布 >= 視口
對(duì)比bg的background-attanchment:fixed; //非重要大圖,都是相對(duì)于viewport
標(biāo)準(zhǔn)流和脫標(biāo)結(jié)合
將包裹子元素的div脫標(biāo)
監(jiān)聽canvas的滾動(dòng) js
脫標(biāo)元素特點(diǎn)
可以隨意設(shè)置寬高, 寬高默認(rèn)由內(nèi)容決定
不再受標(biāo)準(zhǔn)流的約束
懸浮, 并向父元素匯報(bào)寬高數(shù)據(jù)(不占位置)
!!!不再嚴(yán)格區(qū)分塊級(jí), 行內(nèi)級(jí), 行內(nèi)塊級(jí)的, 并且相關(guān)的很多特性都會(huì)消失
不再給父元素匯報(bào)寬高數(shù)據(jù)
脫標(biāo)元素內(nèi)部默認(rèn)還是按照標(biāo)準(zhǔn)流布局
Warning!!! 脫標(biāo)元素寬高和位置
width height left top margin-left margin-right都相對(duì)于最近的定位祖先元素
width*50% //指的是 * 最近的定位祖先元素的寬度
標(biāo)準(zhǔn)流相對(duì)于父元素
定位元素（positioned element）
position值不為static的元素
也就是position值為relative、absolute、fixed的元素
absolute 脫離標(biāo)準(zhǔn)流 常用
定位參照對(duì)象是最鄰近的定位(relative, fixed, absolute)祖先元素
如果找不到這樣的祖先元素，參照對(duì)象是viewport
=> 反推:
1. 若需要子元素相對(duì)于某個(gè)元素設(shè)置坐標(biāo),將自己的position設(shè)置為absolute
2. 若需要相對(duì)于viewport, 設(shè)置fixed
3. 若相對(duì)于原來自己的位置,設(shè)置relative
查看是否相對(duì)于viewport, 設(shè)置left/top:0; 查看是否在左上角(div并不頂格)
子絕父相 重點(diǎn) 練習(xí)
movie
二維碼
脫標(biāo)后, 只要不是display:none; 都會(huì)顯示
下載和二維碼之間不能出現(xiàn)斷層
先將所有元素都顯示, 再做其他效果
絕對(duì)定位技巧 重要
- 子元素必須為position: absolute;
=>
.test {
position: absolute;
margin:auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}</pre>
Summary
或子絕父絕
最外層一定至少有一個(gè)元素相對(duì)于viewport
補(bǔ)充問題
input是替換元素, 一般不使用的一些type類型
a元素不能嵌套a元素
<!-- <div class="test"></div> 的Emmet簡(jiǎn)寫-->
.test
元素的重疊
按照html顯示的順序覆蓋
定位元素蓋住非定位元素
層疊優(yōu)先級(jí)
- 定位元素 > html順序
引入z-index
z-index屬性用來設(shè)置定位元素的層疊順序
僅對(duì)定位元素有效,取值正整數(shù)、負(fù)整數(shù)、0
比較原則 z-index
都是定位元素,并且有z-index值
1. 如果是兄弟關(guān)系
z-index越大，層疊在越上面
z-index相等，寫在后面的那個(gè)元素層疊在上面
- 如果不是兄弟關(guān)系
各自從元素自己以及祖先元素中，找出最鄰近的2個(gè)定位元素進(jìn)行比較
而且這2個(gè)定位元素必須有設(shè)置z-index的具體數(shù)值, 才能參與比較.
層級(jí)復(fù)雜時(shí)較麻煩
!!! 找到兩個(gè)子元素的最臨近(兩個(gè)元素的html位置最接近)并且有z-index值的兩個(gè)定位元素的z-index值比較, 若父*n元素們都沒有z-index值,就用自己的
注意: z-index默認(rèn)值為auto, 并不是0
