頁面制作-CSS-布局-position 2.17

1.定位

系任。position-設(shè)置定位方式
呼巴。top,right,bottom,left,z-index-設(shè)置位置

2.top/right/bottom/left

元素邊緣距離參照物邊緣的距離

3.z-index

設(shè)置元素在z軸上的排序

4.z-index 棧

5.position

纹安。position:static | relative | absolute | fixed

6.position:relative

。仍在文檔流中
。參照物為元素本身
最常用:改變?cè)撛貙蛹?jí)
使用場(chǎng)景:絕對(duì)定位元素的參照物

7.position:absolute

。默認(rèn)寬度為內(nèi)容寬度
盾戴。脫離文檔流
。參照物為第一個(gè)定位祖先/根元素(根元素即html元素

8.輪播頭圖

position:relative;
position:absolute;

image.png

9.position:fixed

兵多。默認(rèn)寬度為內(nèi)容寬度
尖啡。脫離文檔流
。參照物為視窗

布局:固定頂欄position:fixed; top:0

布局:遮罩position:fixed; z-index:999;top:0; width:100%,height:100%//蓋住整個(gè)頁面

布局:三行自適應(yīng)布局

.head{position:absolute; top:0; left:0; width:100%; height:100%;}
.body{position:absolute; top:100px; left:0; bottom:100px; right:0;}
.foot{position:absolute; bottom:0; left:0; width:100%; height:100px;}```
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末剩膘,一起剝皮案震驚了整個(gè)濱河市衅斩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌怠褐,老刑警劉巖畏梆,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異惫搏,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蚕涤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門筐赔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人揖铜,你說我怎么就攤上這事茴丰。” “怎么了天吓?”我有些...
    開封第一講書人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵贿肩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我龄寞,道長(zhǎng)汰规,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任物邑,我火速辦了婚禮溜哮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘色解。我一直安慰自己茂嗓,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開白布科阎。 她就那樣靜靜地躺著述吸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪锣笨。 梳的紋絲不亂的頭發(fā)上蝌矛,一...
    開封第一講書人閱讀 50,084評(píng)論 1 291
  • 那天道批,我揣著相機(jī)與錄音,去河邊找鬼朴读。 笑死屹徘,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的衅金。 我是一名探鬼主播噪伊,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼氮唯!你這毒婦竟也來了鉴吹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤惩琉,失蹤者是張志新(化名)和其女友劉穎豆励,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瞒渠,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡良蒸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了伍玖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嫩痰。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖窍箍,靈堂內(nèi)的尸體忽然破棺而出串纺,到底是詐尸還是另有隱情,我是刑警寧澤椰棘,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布纺棺,位于F島的核電站,受9級(jí)特大地震影響邪狞,放射性物質(zhì)發(fā)生泄漏祷蝌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一帆卓、第九天 我趴在偏房一處隱蔽的房頂上張望杆逗。 院中可真熱鬧,春花似錦鳞疲、人聲如沸罪郊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽悔橄。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間癣疟,已是汗流浹背挣柬。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留睛挚,地道東北人邪蛔。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像扎狱,于是被迫代替她去往敵國(guó)和親侧到。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案淤击? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,742評(píng)論 1 92
  • display:設(shè)置元素的顯示方式 display:block(塊級(jí)元素) 默認(rèn)為父元素寬高匠抗,可設(shè)置寬高相對(duì)前序換...
    bluishwhiteC閱讀 659評(píng)論 0 0
  • 6.布局 布局:將元素以正確的大小擺放在正確的位置上。 display屬性:設(shè)置元素的顯示方式污抬。block | i...
    hyt222閱讀 394評(píng)論 0 0
  • 盒子模型 如果你看過很多教程依然學(xué)不會(huì)盒子模型,那么請(qǐng)你耐心看完這篇. 盒子模型3D層次結(jié)構(gòu): 從第一層到第五層依...
    info_gu閱讀 2,490評(píng)論 0 12
  • CSS的position總是屬性很容易讓人弄混~ 為了仔細(xì)區(qū)別它們汞贸,所以今天總結(jié)一下CSS的position屬性~...
    fehysunny閱讀 2,914評(píng)論 0 7