CSS定位

static 定位

????HTML 元素的默認值宰掉,即沒有定位潜支,遵循正常的文檔流對象牛郑。

fixed 定位

????元素的位置相對于瀏覽器窗口是固定位置张峰。

????即使窗口是滾動的它也不會移動:

????Fixed定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。

????Fixed定位的元素和其他元素重疊侧但。

relative 定位

????相對定位元素的定位是相對其正常位置。航罗、

????移動相對定位元素禀横,但它原本所占的空間不會改變。

absolute 定位

????絕對定位的元素的位置相對于最近的已定位父元素粥血,如果元素沒有已定位的父元素柏锄,那么它的位置相對于:

????absolute 定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間复亏。

????absolute 定位的元素和其他元素重疊绢彤。

sticky 定位

? ??position: sticky; 基于用戶的滾動位置來定位。

????粘性定位的元素是依賴于用戶的滾動蜓耻,在 position:relativeposition:fixed 定位之間切換茫舶。

????它的行為就像 position:relative; 而當(dāng)頁面滾動超出目標區(qū)域時,它的表現(xiàn)就像 position:fixed;刹淌,它會固定在目標位置饶氏。

重疊的元素

????元素的定位與文檔流無關(guān)讥耗,所以它們可以覆蓋頁面上的其它元素

????z-index屬性指定了一個元素的堆疊順序(哪個元素應(yīng)該放在前面,或后面)

????一個元素可以有正數(shù)或負數(shù)的堆疊順序:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疹启,一起剝皮案震驚了整個濱河市古程,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌喊崖,老刑警劉巖挣磨,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異荤懂,居然都是意外死亡茁裙,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進店門节仿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來晤锥,“玉大人,你說我怎么就攤上這事廊宪》” “怎么了?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵箭启,是天一觀的道長壕翩。 經(jīng)常有香客問我,道長傅寡,這世上最難降的妖魔是什么放妈? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮赏僧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘扭倾。我一直安慰自己淀零,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布膛壹。 她就那樣靜靜地躺著驾中,像睡著了一般。 火紅的嫁衣襯著肌膚如雪模聋。 梳的紋絲不亂的頭發(fā)上肩民,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天,我揣著相機與錄音链方,去河邊找鬼持痰。 笑死,一個胖子當(dāng)著我的面吹牛祟蚀,可吹牛的內(nèi)容都是我干的工窍。 我是一名探鬼主播割卖,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼患雏!你這毒婦竟也來了鹏溯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤淹仑,失蹤者是張志新(化名)和其女友劉穎丙挽,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體匀借,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡颜阐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了怀吻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞬浓。...
    茶點故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蓬坡,靈堂內(nèi)的尸體忽然破棺而出猿棉,到底是詐尸還是另有隱情,我是刑警寧澤屑咳,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布萨赁,位于F島的核電站,受9級特大地震影響兆龙,放射性物質(zhì)發(fā)生泄漏杖爽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一紫皇、第九天 我趴在偏房一處隱蔽的房頂上張望慰安。 院中可真熱鬧,春花似錦聪铺、人聲如沸化焕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽撒桨。三九已至,卻和暖如春键兜,著一層夾襖步出監(jiān)牢的瞬間凤类,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工普气, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谜疤,地道東北人。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像茎截,于是被迫代替她去往敵國和親苇侵。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,554評論 2 349

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

  • CSS 定位詳解 作者: 阮一峰 CSS 有兩個最重要的基本屬性企锌,前端開發(fā)必須掌握:display 和 posit...
    Daeeman閱讀 331評論 0 1
  • 當(dāng)在這一個頁面上實現(xiàn)布局和定位有幾種不同的技術(shù)榆浓。使用哪種技術(shù),很大程序上取決于內(nèi)容和目標頁面撕攒,因為有很多技術(shù)比別人...
    lulu_c閱讀 1,048評論 0 5
  • CSS 定位 CSS有三種基本的定位機制:普通流抖坪,浮動萍鲸,絕對定位(absolute, fixed):普通流是默認定...
    _空空閱讀 5,725評論 0 15
  • CSS布局的核心是position屬性,對元素盒子應(yīng)用這個屬性擦俐,可以相對于它在常規(guī)文檔流中的位置重新定位脊阴。posi...
    神豪VS勇士贏閱讀 435評論 0 0
  • 來源于視頻教程: https://www.bilibili.com/video/BV14J4114768?p=23...
    那時青荷_e26a閱讀 137評論 0 0