css定位案例探討（position屬性詳解）

Half 發(fā)布于2019-08-28 18:22 / 1586人閱讀

簡述

定位問題一直是新手學(xué)習(xí)css的一個(gè)難點(diǎn)，現(xiàn)在我將他們總結(jié)出來，希望對(duì)大家有幫助

position詳解

在css中，通過position屬性，配合top,right,left,buttom對(duì)元素進(jìn)行定位
position屬性有：static，relative，absolute，fixed四種，下面分別探討

默認(rèn)定位static

效果：

盒子一行一個(gè)，自動(dòng)換行

相對(duì)定位relative

元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

絕對(duì)定位absolute

元素脫離原來的位置，釋放來的空間，相當(dāng)于被獨(dú)立出來了，此時(shí)，它所相對(duì)的位置是它position為relative的父級(jí)元素，如果沒有，則相對(duì)于body定位

固定定位fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過它的位置始終相對(duì)于窗口，可以實(shí)現(xiàn)固定導(dǎo)航欄的效果

云服務(wù)器 GPU云服務(wù)器 position屬性，css position定位 position詳解 position，css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111203.html

相關(guān)文章

詳解css相對(duì)定位和絕對(duì)定位

摘要：以上兩點(diǎn)點(diǎn)可以總結(jié)出，相對(duì)定位總是以父級(jí)左上角為原點(diǎn)進(jìn)行定位的，如果父級(jí)不存在，則以瀏覽器左上角進(jìn)行定位。贊助我以寫出更好的文章，give me a cup of coffee? 2017最新最全前端面試題案例代碼1 .rel{ border: 1px solid #ccc; height: 200px; ...

Jaden 2019-08-28 17:57 評(píng)論0 收藏0
CSS魔法堂：說說Float那個(gè)被埋沒的志向

摘要：時(shí)其寬度始終保持占滿寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動(dòng)。前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...

legendmohe 2019-08-30 12:55 評(píng)論0 收藏0
CSS 最核心的幾個(gè)概念

摘要：本文將講述中最核心的幾個(gè)概念，包括盒模型等。塊級(jí)元素的默認(rèn)為，而內(nèi)聯(lián)元素則是根據(jù)其自身的內(nèi)容或子元素來決定其寬度。如果該元素的下一個(gè)兄弟元素中有內(nèi)聯(lián)元素通常是文字，則會(huì)圍繞該元素顯示，形成類似文字圍繞圖片的效果。本文將講述 CSS 中最核心的幾個(gè)概念，包括：盒模型、position、float等。這些是 CSS 的基礎(chǔ)，也是最常用的幾個(gè)屬性，它們之間看似獨(dú)立卻又相輔相成。為了掌握它們...

SwordFly 2019-08-28 17:51 評(píng)論0 收藏0
前端技術(shù)之_CSS詳解第六天--完結(jié)

前端技術(shù)之_CSS詳解第六天--完結(jié) 一、復(fù)習(xí)第五天的知識(shí) a標(biāo)簽的偽類4個(gè)：　　a:link 沒有被點(diǎn)擊過的鏈接　　a:visited 訪問過的鏈接　　a:hover 懸停　　a:active 按下鼠標(biāo)不松手順序就是“love hate”準(zhǔn)則。可以簡寫： 1 a{ 3 } 4 a:hover{ 6 } background系列屬性，CSS2.1層面 ...

番茄西紅柿 2019-04-23 13:44 評(píng)論0 收藏0
CSS > CSS3 中的層疊上下文初探

摘要：但該盒不建立新的層疊上下文，除非是根元素。以上是基于的層疊上下文介紹。同級(jí)情況下，按照二者在源代碼中的順序，居后的又重新占領(lǐng)高地了?，F(xiàn)在我們看以下源代碼這個(gè)時(shí)候，以視口為包含塊進(jìn)行定位和大小計(jì)算，將會(huì)鋪滿整個(gè)屏幕。前言：關(guān)于層疊上下文，筆者還沒有去閱讀更詳細(xì)的 W3C 規(guī)范來了解更本質(zhì)的原理（表打我，等我校招拿到 offer 了我就讀好伐 T_T）。一直聽說 CSS3 里的層疊上下文...

pcChao 2019-08-28 18:18 評(píng)論0 收藏0