整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家應該都知道，網站的布局對一個網站來說至關重要， CSS 作為新手，要做好一個網站，CSS 這關肯定得先過，今天教大家 CSS 的定位（Position）~
position 屬性指定了元素的定位類型。position 屬性有如下五個值：
static
relative
fixed
absolute
sticky
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決于定位方法。
static 定位
HTML元素的默認值，即沒有定位，元素出現在正常的流中。靜態(tài)定位的元素不會受到 top, bottom, left, right 影響。
示例代碼
div.static {
position: static;
border: 3px solid #73AD21;
}
fixed 定位
元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動：
示例代碼
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed 定位使元素的位置與文檔流無關，因此不占據空間。Fixed 定位的元素和其他元素重疊。
relative 定位
相對定位元素的定位是相對其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
移動相對定位的元素，但它原本所占的空間不會改變。
h2.pos_top
{
position:relative;
top:-50px;
}
相對定位元素經常被用來作為絕對定位元素的容器塊。
absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
absolute 定位使元素的位置與文檔流無關，因此不占據空間。absolute 定位的元素和其他元素重疊。
sticky 定位
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。position: sticky; 基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現就像 position:fixed;，它會固定在目標位置。元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實例)。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
重疊的元素
元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素。
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）
一個元素可以有正數或負數的堆疊順序：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。
有什么疑問可以私信小編:"前端"
【技術等級】初級
【承接文章】《CSS這樣處理HTML列表，三個簡單的CSS屬性，美化你的頁面》
本文小海老師為大家詳細講解有關CSS定位方面的知識。相信許多有經驗的朋友一定會經常在布局時遇到與定位有關的問題，今天咱們就共同來看一看CSS定位都具有哪些屬性以及它們的用法。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術的學習者。
定位屬性是指對HTML中的元素進行位置確定的一系列方式。CSS總共提供了以下四種定位方式：
流式定位
絕對定位
相對定位
固定定位
與定位相關的CSS屬性包括以下11個：
width
height
display
position
top
right
bottom
left
z-index
visibility
overflow
一、利用position屬性設置定位方式：
CSS技術使用 position 屬性設置HTML元素的定位方式
CSS技術使用position設置HTML元素的定位方式。
首先，我們先來了解一下這四種定位方式的特點：
流式定位：HTML元素默認采用該種定位方式。這是指所有的HTML元素從上到下、從左向右按照代碼的書寫順序依次出現。
絕對定位：所有的HTML元素的位置都是相對于頁面左上角來實現定位的。
相對定位：所有的HTML元素的位置都是相對于上一個元素來實現定位的。
固定定位：HTML元素相對于頁面指定位置固定不變，不受垂直滾動條的影響。同時，HTML元素在固定定位的前提下，其元素位置是相對于頁面左上角。
我們一般將上述四種定位方式歸納為兩種：“流式定位”和“非流式定位”。
具體的HTML元素采用哪種定位方式，是通過position屬性來實現的，該屬性有以下四種取值。
static，默認值，HTML元素采用“流式定位”。
absolute，HTML元素采用“絕對定位”。
relative，HTML元素采用“相對定位”。
fixed，HTML元素采用“固定定位”。
二、HTML元素的位置屬性：
CSS技術使用四個屬性設置HTML非流式定位元素的位置
當HTML元素采用“非流式定位”時，可以使用以下四個位置屬性來設置該元素具體的位置。
left，設置元素左側的位置。
right，設置元素右側的位置。
top，設置元素頂部的位置。
bottom，設置元素底部的位置。
這四個屬性的取值都可以是帶有單位的數值。
三、HTML塊級元素的尺寸屬性：
CSS技術使用兩個屬性設置塊級元素的尺寸
當HTML元素為“塊級元素”時，可以使用以下兩個尺寸屬性來設置該塊級元素的寬度和高度。
width，設置塊級元素的寬度。
height，設置塊級元素的高度。
這兩個屬性包括以下幾種取值：
auto，自動，塊級元素的寬度和高度隨元素內部的內容多少而自動變化。
帶有單位的數值，指定塊級元素的寬度和高度為明確的數值。
百分比，指定塊級元素的寬度和高度為父元素的百分比。
四、設置HTML元素的顯示特性：
CSS技術利用 display 屬性來設置CSS元素的顯示特性
CSS技術利用display屬性來設置CSS元素的顯示特性。
該屬性有多種取值：
none，將HTML元素隱藏。
block，將HTML元素中的內聯元素或其他元素轉換為塊級元素。
inline，將HTML元素中的塊級元素或其他元素轉換為內聯元素。
inline-block，將HTML元素中的任意元素轉換為內聯塊元素。
塊級元素獨占一行。
可以利用width和height屬性為塊級元素設置寬度和高度。
內聯元素可以在一行內顯示多個。
不能利用width和height屬性設置內聯元素的寬度和高度。
內聯塊元素結合了“塊級元素”和“內聯元素”各自的優(yōu)點：
可以利用width和height屬性為內聯塊元素設置寬度和高度。
內聯塊元素可以在一行內顯示多個。
定位屬性還包括三個屬性，小海老師會在下一篇文章中為大家介紹剩下的屬性以及定位功能的具體用法。
下一篇文章中，小海老師會繼續(xù)為大家向下講解CSS定位屬性，下一次我們講解CSS中剩余的三個定位屬性以及定位技術的使用，希望大家千萬不要錯過！
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統(tǒng)的歸納過的。
關注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學者跟著學下去，我們共同將前端開發(fā)的路努力堅持的走下去。
SS所提供的Position定位屬性在進行網頁頁面布局過程中非常重要，通過使用Position定位屬性可以實現對頁面元素進行精確定位，最終達到較好的設計及頁面展示效果。本文主要針對Position屬性設計教學案例，實現教學。
CSS學習教程
Position定位屬性為設計人員提供5類定位模式，分別為static靜態(tài)定位、relative相對定位、absolute絕對定位、fixed固定定位及sticky磁鐵定位模型。其中較常使用的是相對定位、絕對定位與固定定位三種模式。
以上給出了position屬性常用的定位方式，在實際進行頁面設計及元素布局過程中可以使用以上屬性實現元素的精確定位。
為演示定位屬性使用，本文設計制作上海世界技能大賽選手證，要求學生使用HTML進行選手證的設計及編碼實現。要求：
本例設計要求如上所示，設計實現參考效果如下所示：
參賽證設計樣式
參賽證設計樣式描述如上圖所示，基本元素來自世界技能大賽上海網站，主要logo包含上海世賽標識LOGO、選手照片與選手信息。所需素材如下：
案例所需素材
本例實現代碼如下所示：
CSS樣式文件
頁面body部分
本例實現代碼如上所示，其中CSS樣式部分用于實現div布局樣式，頁面body部分為頁面呈現內容。本例父元素使用relative屬性進行定位，所有子元素均以父元素為基礎使用absolute進行精確定位。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區(qū)回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！如需完整案例代碼請關注并私信作者。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
