淺析CSS定位

ACb0y 發(fā)布于2019-08-29 17:14 / 1473人閱讀

摘要：屬性有種值表示沒有定位，元素出現(xiàn)在正常的文檔流中。為靜態(tài)定位的元素設(shè)置不起作用。元素的位置相對于瀏覽器窗口是固定位置。定位使得元素脫離了文檔流，因而不占據(jù)空間。設(shè)置了絕對定位的元素寬高由其內(nèi)部元素?fù)纹稹?/p>

position 屬性指定了html元素的定位類型。

position 屬性有 4 種值：
1. static（default）
表示沒有定位，元素出現(xiàn)在正常的文檔流中。
為靜態(tài)定位的元素設(shè)置 top|bottom|left|right 不起作用。

2. fixed
元素的位置相對于瀏覽器窗口是固定位置。
即使瀏覽器的窗口是滾動的它也不會移動。
fixed定位使得元素脫離了文檔流，因而不占據(jù)空間。
設(shè)置了固定定位的元素寬高由其內(nèi)部元素?fù)纹稹?br>

3. relative
相對定位的元素是相對其正常位置。

由截圖可以看出來，元素相對其正常位置向下向右移動了100px，但是它原本所占的空間并不會改變。

并且其后的同一個父容器里的元素會一起相對向下向右移動100px，與其父容器平級容器里的元素不受影響。
相對定位元素經(jīng)常被作為絕對定位元素的容器塊。

4. absolute
絕對定位的元素的位置是相對其最近的已定位父元素（也就是除static之外），如果找不到已定位的父元素，那么就相對于元素。

absolute定位使得元素脫離了文檔流，因而不占據(jù)空間。
設(shè)置了絕對定位的元素寬高由其內(nèi)部元素?fù)纹稹?/p>

ps: 5. sticky 粘性定位？？？

GPU云服務(wù)器云服務(wù)器源碼淺析 cdn淺析 jdbc連接mysql數(shù)據(jù)庫的方法淺析相對定位-絕對定位

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

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

相關(guān)文章

CSS中Background淺析

摘要：如果只指定其中一個值，另一個值會被設(shè)定為因此可以和混用。通過設(shè)定負(fù)的，背景圖像的一部分被拖拽到父元素之外，從而在父元素之內(nèi)顯示要顯示的內(nèi)容。隨著的普及，相信漸變將成為主流。可以顯示的顯示范圍。作為一個有理想有包袱的頁面仔，正像鑫哥在這篇文章說說CSS學(xué)習(xí)中的瓶頸(強(qiáng)烈推薦)里說的其實，廣大頁面屌絲們并不畏懼那些學(xué)習(xí)能力強(qiáng)的人，畏懼的是那些學(xué)習(xí)能力強(qiáng)，同時，尼瑪學(xué)習(xí)又拼命的人。頁面仔...

objc94 2019-08-30 13:03 評論0 收藏0
BFC與自適應(yīng)淺析

摘要：最常見的有簡稱和簡稱。的區(qū)域不會與重疊。也就是說只要父容器形成就可以，觸發(fā)方式見上清除浮動比較好的方法以上用，用更好的方法自適應(yīng)布局觸發(fā)自適應(yīng)屬性對比參考資料張鑫旭老師的博客本文是從之前的csdn上的亂七八糟的筆記整理過來的概念　　Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何...

makeFoxPlay 2019-08-29 11:24 評論0 收藏0
淺析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)...

荊兆峰 2019-04-23 13:29 評論0 收藏0
CSS屬性中經(jīng)常出現(xiàn)的百分比

摘要：絕對單位英寸磅相對單位與元素字號掛鉤與元素字體的高度掛鉤與根元素字號掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進(jìn)。參考權(quán)威教程節(jié)樣式可以使用百分比的屬性總結(jié)淺析屬性之中經(jīng)常出現(xiàn)的百分比起源：一道面試題（貓眼電影）問題：css中的單位都有哪些？可以取百分?jǐn)?shù)的單位有哪些？其中margin-top取百分?jǐn)?shù)時是相對于誰來計算的？回答：（1）css中的單位：CSS規(guī)...

mylxsw 2019-08-29 11:11 評論0 收藏0
淺析一波路由的hash 和 history 的區(qū)別與實現(xiàn)原理以及服務(wù)器刷新404的問題及解決方法

摘要：滿足單頁面的需求。的原理略微復(fù)雜一點，它可以通過去變動內(nèi)容，不會造成頁面刷新。既然瀏覽器不會刷新。這樣的話，就可以做到刷新頁面不崩的效果。如果有服務(wù)器部署基礎(chǔ)的可以拿此類的服務(wù)器試試，我自己這邊是默默地拿著配置成功了先解釋下基本概念hashhash 不是那個哈希算法，就是以前url用的錨點，以前是多用來定位頁面展示內(nèi)容。代表符號是#之所以用hash是因為他既可以獲取到，又可以不去刷新...

APICloud 2019-08-26 10:12 評論0 收藏0