国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS相對定位和絕對定位

xinhaip / 1655人閱讀

摘要：三絕對定位拼爹型絕對定位不占有位置。父級有定位絕對定位是將元素依據最近的已經定位絕對固定或相對的父元素祖先進行定位。絕對定位的盒子水平垂直居中普通盒子左右居中用即可，但對于絕對定位的就無效了。

為什么要學定位

定位是CSS中的難點和重點，特別是后面學javascript特效時候，比如實現下拉菜單、彈框等，要蓋住下面內容又不會影響下面內容，比如要超出盒子一部分，比如屏幕中有一個小彈窗飄來飄去的，再比如要放在盒子中任意位置，都必須用定位來做，一定要搞清楚。
定位類似于浮動，脫離標準流，但又不同于浮動，它可以放在任何地方。

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。
1.邊偏移：告訴盒子往哪兒走
2.定位模式（定位的分類）

一、靜態定位(static)

所有元素的默認定位方式，網頁中所有元素都默認的是靜態定位，其實就是標準流的特性。

靜態定位唯一的用處，就是取消定位。

例如有些網站的欄目，往下劃的時候會出現，往上劃到頂部的時候又消失了，欄目一會兒有定位一會兒沒有定位，實現方式就是一會兒加個固定定位，一會兒用static取消固定定位。

二、相對定位(relative)--自戀型

相對定位是將元素相對于它在標準流中的位置進行定位，即每次移動的位置，是以自己的左上角為基點移動的。例如設置了margin，則以margin后的左上角位置來移動。

對元素設置相對定位后，可以通過邊偏移屬性來改變元素位置，但它在文檔流中的位置繼續占有。

注意：
1.相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來所占的位置，繼續占有。
2.其次，每次移動的位置，是以自己的左上角為基點移動。
如果說浮動的主要目的是讓多個塊級元素一行顯示，那么定位的主要價值是移動位置，讓盒子到我們想要的位置上去。

三、絕對定位(absolute)--拼爹型

絕對定位不占有位置。
1.父級沒有定位
若所有父元素都沒有定位，或沒有父親，則以瀏覽器左上角為準對齊。

2.父級有定位
絕對定位是將元素依據最近的已經定位（絕對、固定或相對）的父元素（祖先）進行定位。例如父親沒有定位，爺爺有定位，則根據爺爺進行定位。

子絕父相 
一般來說，子級是絕對定位的話，父親要用相對定位。

因為如果父親用絕對定位，它不占文檔位置，后面的紫色盒子就會蓋住藍色的盒子，并不是我們想要的效果。

網站上經常用到的類似的小箭頭，都是用絕對定位做的，因為絕對定位不占文檔位置。

絕對定位的盒子水平/垂直居中

普通盒子左右居中用margin:aotu即可，但對于絕對定位的就無效了。

加了定位的或浮動的盒子，margin:auto就會失效。

可以用一下方法：
1.首先left:50%，此時盒子左邊對齊瀏覽器中線；
2.然后margin-left:-a(a為盒子寬度的一半），讓盒子往右走自己寬度的一半。

四、固定定位（fixed）--認死理型

1.固定定位元素跟父親沒有任何關系，只認瀏覽器；
2.固定定位完全脫標，不占位置，不隨著滾動條滾動。

定位模式轉換

跟浮動一樣，元素添加了絕對定位和固定定位之后，元素模式也會發生轉換，都轉換為行內塊元素，因此行內元素若添加了絕對定位、固定定位、浮動后，可以不用轉換模式，直接給高度和寬度即可。
注意：行內塊元素的高寬和內容有關系。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117073.html

相關文章

  • CSS入門指南-3：定位元素

    摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。 這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

    paulquei 評論0 收藏0

  • CSS入門指南-3：定位元素

    摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。 這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

    DesGemini 評論0 收藏0

  • position 的屬性值

    摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

    番茄西紅柿 評論0 收藏0

  • CSS詳細解讀定位

    摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。我的回答是相對自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。 一 前言 CSS定位是CSS布局只能夠重要的一環。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。 二 正文 1.文檔流布局的概念 將窗體自上而下分成一行行， 并在每行中按從左至右的...

    1treeS 評論0 收藏0

  • 詳解css相對定位和絕對定位

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

    Jaden 評論0 收藏0

發表評論

0條評論

xinhaip

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<