這篇文章主要介紹了關於CSS的positon屬性的分析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
position是CSS中非常重要的一個屬性，透過position屬性，我們可以讓元素相對於其正常位置，父元素或瀏覽器視窗進行偏移。 postion也是初學者容易無法搞清楚狀況的屬性，本文將從最基礎的知識講起，談談關於positon屬性的一些理論與應用。
基礎
postion屬性我們成為定位，它有4個不同類型的定位，這些類型會影響元素的產生方式，下面我們詳細說明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屬性的分析
（3）absolute
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屬性的分析
（4）fixed
fixed的表現方式類似於absolute，但是相較於absolute相對於不確定的父元素進行偏移，fixed就是相對於瀏覽器視窗進行偏移
在
1.根元素的包含區塊，根元素一般是html元素，有些瀏覽器會使用body作為根元素，大多數瀏覽器，初始包含區塊是一個視窗大小的矩形
2.非根元素的包含區塊，如果該元素的position是relative或static，它的包含區塊是最近的區塊級框，表的單元格或行內區塊的內容邊界###我們舉例進行說明，###HTML程式碼###1 <p> 2 我是父级元素的内容 3 <p class="relative"> 4 相对定位元素 5 </p> 6 </p>
p { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }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>
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屬性的分析
如图所示，有两个绝对定位元素，第一个元素没有position不是static的祖先元素，所以它的CSS的positon屬性的分析是body，根据body进行偏移，
第二个绝对定位元素设置了一个relative的父元素，它根据父元素进行偏移。
元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。看看下面的例子：
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屬性的分析
我们可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢，这就要用到z-index属性，这个属性表示元素的叠加顺序，默认情况下，z-index为0，数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的z-index为10，结果如下
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屬性的分析
默认情况下，两个元素都是正常的元素，设置了负的margin属性后，后面的元素会覆盖前面的元素，我们修改第一个元素的class为relative，可以看到效果如下：
CSS的positon屬性的分析
添加了相对定位后，第一个元素就会覆盖其他正常的元素了。
relative属性最经常的一个应用应该是作为absolute元素的CSS的positon屬性的分析了，为了限制absolute元素的偏移位置，常常设置其父元素为relative来作为其CSS的positon屬性的分析。
position的应用非常频繁，下面我来说说常见的一些场景：
在电商网站中，我们常常可以看到产品的左上角或右上角有一些比如“新品”，“促销”，“热卖”等标签，比如下图：
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屬性的分析
如图所示，右上角有一个标签。原理很简单，就是设置父元素相对定位，标签元素绝对定位，然后相对于父元素偏移到右上角。
自动完成框是一个非常常见的应用，其生成的下拉菜单也是用到了position属性。我们先看看下面的效果：
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的positon屬性的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
