首頁  >  文章  >  web前端  >  CSS的positon屬性的分析

CSS的positon屬性的分析

不言
不言原創
2018-06-12 15:17:211609瀏覽

這篇文章主要介紹了關於CSS的positon屬性的分析,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

position是CSS中非常重要的一個屬性,透過position屬性,我們可以讓元素相對於其正常位置,父元素或瀏覽器視窗進行偏移。 postion也是初學者容易無法搞清楚狀況的屬性,本文將從最基礎的知識講起,談談關於positon屬性的一些理論與應用。

基礎

postion屬性我們成為定位,它有4個不同類型的定位,這些類型會影響元素的產生方式,下面我們詳細說明position屬性。

position四種類型

(1)static
static是position屬性的預設值,預設情況下,區塊級元素和行內元素按照各自的特性進行顯示
(2)relative
relative翻譯成中文稱相對定位,設定了這個屬性後,元素會根據top,left,bottom,right進行偏移,關鍵點是它原本的空間仍然保留。我們看下面範例:
HTML程式碼

1 <p>
2 </p>
3 <p></p>

CSS程式碼

1 p { background: #0094ff; width: 250px; height: 100px; }
2         .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

效果圖

CSS的positon屬性的分析

CSS的positon屬性的分析



CSS的positon屬性的分析

# #在這個例子中,p.relative相對定位,並且left設定為20px,left設定為50px,其相對於父元素進行偏移,並且原本的空間也佔據著,下面的元素並不會頂替上去。


(3)absolute

元素設定成absolute後會脫離文件流,並且不佔有原本的空間,後面的元素會頂替上去,而且不論元素是行內元素還是區塊級元素,都會生成一個區塊級框,也就是例如行內元素span設定了absolute後就可以設定height和width屬性了。看下面範例:

HTML程式碼

1 <span class="absolute">
2 </span>
3 <p></p>

CSS程式碼

1 p { background: #0094ff; width: 250px; height: 100px; }
2         .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
效果圖


CSS的positon屬性的分析

CSS的positon屬性的分析


#如圖所示,span標籤被設定成絕對定位,就可以設定height和width屬性,而且不佔有原本的空間,後面的p元素會頂替上去。

(4)fixed

fixed的表現方式類似於absolute,但是相較於absolute相對於不確定的父元素進行偏移,fixed就是相對於瀏覽器視窗進行偏移

包含區塊



詳解CSS float屬性

#中我們提到包含區塊這個概念。對於position屬性也有包含區塊這個屬性,它要分成幾個情況來討論:

1.根元素的包含區塊,根元素一般是html元素,有些瀏覽器會使用body作為根元素,大多數瀏覽器,初始包含區塊是一個視窗大小的矩形

2.非根元素的包含區塊,如果該元素的position是relative或static,它的包含區塊是最近的區塊級框,表的單元格或行內區塊的內容邊界###我們舉例進行說明,###HTML程式碼###
1 <p>
2     我是父级元素的内容        
3     <p class="relative">
4         相对定位元素
5     </p>
6 </p>
###CSS程式碼###
p { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
###效果圖###############包含塊######這是相對定位元素的包含塊,為最近的塊級框,表的單元格或行內塊的內容邊界,相對定位元素相對於其包含塊進行偏移,我們可以簡單理解為相對於其原來的位置進行偏移。 ######3.非根元素的包含區塊,如果該元素的position是absolute,則包含區塊為最近的position不是static的祖先元素。 ###簡單來說,它的包含區塊會從父級元素一直向上尋找,找到第一個position不是static的元素為止。 ######偏移屬性######前面的範例中已經涉及偏移屬性,它指的是元素相對於其包含區塊的偏移,我們稱之為偏移屬性,分別是top,bottom,left,right,依序代表上下左右。他們的值可以是具體的數值,也可以是百分比。如果是百分比,top和bottom是相對於包含區塊高度的百分比,left和right是相對於寬度的百分比。它們也可以設定負值,即有可能將元素移動到包含區塊的外邊。 ######絕對定位######接下來我們了解絕對定位的詳細細節。 ######基本的絕對定位######當一個元素被設定為絕對定位時,會脫離文件流,然後相對其包含區塊進行偏移。 ###一般來說,我們會將一個元素設為relative來作為absolute元素的包含區塊,我們來看看下面的例子:###HTML程式碼###
 1     <p class="absolute"> 
 2         相对于初始CSS的positon屬性的分析定位 
 3     </p> 
 4     <br /> 
 5     <br /> 
 6     <br /> 
 7     <br /> 
 8     <br /> 
 9     <br />
 10     <p class="relative">
 11         <p class="absolute">
 12             相对于最近relative祖先元素定位
 13         </p>
 14     </p>
###CSS程式碼###
1 p { background: #0094ff; width: 250px; height: 100px; }
2         .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
3         .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
## #效果圖###

CSS的positon屬性的分析

CSS的positon屬性的分析

如图所示,有两个绝对定位元素,第一个元素没有position不是static的祖先元素,所以它的CSS的positon屬性的分析是body,根据body进行偏移,
第二个绝对定位元素设置了一个relative的父元素,它根据父元素进行偏移。

CSS的positon屬性的分析

元素设置成绝对定位后会脱离文档流,并且失去占用的空间,而且如果偏移的位置接近,会造成重叠问题。看看下面的例子:
HTML代码

1 <p class="relative">
2     <p class="absolute">
3         相对于最近relative祖先元素定位1
4     </p>
5     <p class="absolute light">
6         相对于最近relative祖先元素定位2
7     </p>
8 </p>

CSS代码

1 p { background: #0094ff; width: 250px; height: 100px; }
2 .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; }
3 .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
4 .light { background: #f3d6d6; top: 70px; left: 80px; }

效果图

CSS的positon屬性的分析

CSS的positon屬性的分析

我们可以看到,第二个绝对定位元素盖住了第一个元素,那怎么让第一个元素盖住第二个元素呢,这就要用到z-index属性,这个属性表示元素的叠加顺序,默认情况下,z-index为0,数值越高的元素层级越高,就可以盖住低于其层级的元素,我们设置第一个原色的z-index为10,结果如下
CSS的positon屬性的分析

CSS的positon屬性的分析

如果两个元素的层级相同,则越后面的元素会覆盖前面的元素,默认情况下,第二个元素就会盖住第一个元素。

固定定位

fixed定位很简单,类似与absoulte,但是它的CSS的positon屬性的分析就是浏览器窗口,相对来说简单很多。常见的应用比如固定导航,回到顶部。在这里不再赘述,大家可以查找相关资料。

相对定位

relative定位的元素进行偏移后,不会脱离文档流,还有占据原本的空间。除此之外,我们还要注意一个细节:如果元素设置了margin为负值之后发生重叠的情况下,相对定位的元素会覆盖普通元素。我们看看下面的例子:
HTML代码

1 <p class="no-relative">
2     未相对定位的元素
3 </p>
4 <p class="minus-margin">
5     负margin元素
6 </p>

CSS代码

1 p { background: #0094ff; width: 250px; height: 100px; }
2 .no-relative { background: #ff6a00; width: 200px; height: 100px; }
3 .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }
4 .minus-margin { margin-top: -30px; }

效果图

CSS的positon屬性的分析

CSS的positon屬性的分析

默认情况下,两个元素都是正常的元素,设置了负的margin属性后,后面的元素会覆盖前面的元素,我们修改第一个元素的class为relative,可以看到效果如下:
CSS的positon屬性的分析

CSS的positon屬性的分析

添加了相对定位后,第一个元素就会覆盖其他正常的元素了。

relative属性最经常的一个应用应该是作为absolute元素的CSS的positon屬性的分析了,为了限制absolute元素的偏移位置,常常设置其父元素为relative来作为其CSS的positon屬性的分析。

应用举例

position的应用非常频繁,下面我来说说常见的一些场景:

CSS的positon屬性的分析

在电商网站中,我们常常可以看到产品的左上角或右上角有一些比如“新品”,“促销”,“热卖”等标签,比如下图:
CSS的positon屬性的分析

CSS的positon屬性的分析

这个是怎么实现的呢,我们来模拟一下:
HTML代码:

1     <p class="product">
2         我是产品
3         <span class="hot">
4             热卖
5         </span>
6     </p>

CSS代码:

1 .product { width: 150px; height: 150px; background: #0094ff; position: relative; }
2    .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }

效果如下:

CSS的positon屬性的分析

CSS的positon屬性的分析

如图所示,右上角有一个标签。原理很简单,就是设置父元素相对定位,标签元素绝对定位,然后相对于父元素偏移到右上角。

自动完成框

自动完成框是一个非常常见的应用,其生成的下拉菜单也是用到了position属性。我们先看看下面的效果:
CSS的positon屬性的分析

CSS的positon屬性的分析

这是一个很简单常见的下来自动完成框,我们来看看它的HTML和CSS代码:
HTML代码

1 <input class="search-box" type="text" placeholder="请输入关键字" value="position" />
2   <ul style="left:58px;">
3       <li>position属性</li>
4       <li>position应用</li>
5       <li>position是什么</li>
6       <li>position翻译</li>
7   </ul>

CSS代码

1 .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; }
2 ul, li { list-style-type: none; }
3 ul { border: 1px solid #ccc; width: 210px; position: absolute; }
4 li { padding: 5px; }

这个原理也很简单,通过设置下拉菜单为绝对定位,然后设置其left属性与输入框对齐。

當然position的應用程式還有很多,例如佈局,例如fixed可以用來做固定導航選單,網頁右下角的固定選單等,有興趣的同學可以自行查找相關資料進行學習。

總結

position屬性是一個容易讓初學者迷惑的屬性,尤其是absolute和relative的應用。要用好它們,首先要從absolute和relative的基本特性開始了解,理解了他們的特性之後應用起來就得心應手了,了解基本原理後,多多寫幾個例子從實踐中去體會它們的特性,慢慢的就會熟悉了。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於CSS的選擇器問題

#透過css設定placeholder的方法

關於css控制UL LI 的樣式解析

#

以上是CSS的positon屬性的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn