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