整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端基礎教程 CSS丨css定位屬性的使用

          家應該都知道,網站的布局對一個網站來說至關重要, 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:relativeposition: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代碼中的元素將被顯示在最前面。

          有什么疑問可以私信小編:"前端"

          望收藏了我寫的文章的你同時可以關注一下“小海前端”,因為這些文章都是連載的,并且是經過我系統(tǒng)的歸納過的。

          【技術等級】初級

          【承接文章】《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元素中的任意元素轉換為內聯塊元素。

          1、塊級元素(display:block)的特點:

          • 塊級元素獨占一行。

          • 可以利用width和height屬性為塊級元素設置寬度和高度。

          2、內聯元素(display:inline)的特點:

          • 內聯元素可以在一行內顯示多個。

          • 不能利用width和height屬性設置內聯元素的寬度和高度。

          3、內聯塊元素(display:inline-block)的特點:

          內聯塊元素結合了“塊級元素”和“內聯元素”各自的優(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定位屬性

          Position定位屬性為設計人員提供5類定位模式,分別為static靜態(tài)定位、relative相對定位、absolute絕對定位、fixed固定定位及sticky磁鐵定位模型。其中較常使用的是相對定位、絕對定位與固定定位三種模式。

          1. static靜態(tài)定位:該定位模式為HTML元素默認定位形式,各類元素按照文檔流對象模型正常排列。使用static定位是,top,left,right,bottom屬性無效。
          2. relative相對定位:該定位模式是指相對自身位置定位(可以理解為相對默認位置進行定位),通過使用top,left,right,bottom屬性實現偏移,該定位模式不會影響正常文檔流,即其他元素位置相對默認位置不變。在DIV嵌套時可以對父層使用該屬性為子層絕對定位提供祖先。
          3. absolute絕對值定位:該定位形式將其最近定位的元素確定為祖先元素,參照祖先元素位置實現定位。如果祖先元素沒有任何定位的話,則以body為祖先元素進行定位。該定位模式將使得被定位元素脫離文檔流。即不保留默認情況下該元素位置。
          4. fixed固定值定位:該定位模式相對于視口進行定位,定位元素不會隨著滾動條的滾動而滾動。與absolute定位的最大區(qū)別在于absolute是相對body內容區(qū)域進行的定位,會隨著滾動條滾動而滾動。

          以上給出了position屬性常用的定位方式,在實際進行頁面設計及元素布局過程中可以使用以上屬性實現元素的精確定位。


          定位實例

          為演示定位屬性使用,本文設計制作上海世界技能大賽選手證,要求學生使用HTML進行選手證的設計及編碼實現。要求:

          1. 選手證需要包含四個DIV層,分別用于表示背景框架層、頂部Logo層、選手照片層及選手信息層;
          2. 使用定位屬性實現各層的精確定位;

          本例設計要求如上所示,設計實現參考效果如下所示:

          參賽證設計樣式

          參賽證設計樣式描述如上圖所示,基本元素來自世界技能大賽上海網站,主要logo包含上海世賽標識LOGO、選手照片與選手信息。所需素材如下:

          案例所需素材


          實現代碼

          本例實現代碼如下所示:

          CSS樣式文件

          頁面body部分

          本例實現代碼如上所示,其中CSS樣式部分用于實現div布局樣式,頁面body部分為頁面呈現內容。本例父元素使用relative屬性進行定位,所有子元素均以父元素為基礎使用absolute進行精確定位。


          本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可在評論區(qū)回復。更多程序設計相關教程及實例分享,期待大家關注與閱讀!如需完整案例代碼請關注并私信作者。


          主站蜘蛛池模板: 国产乱码精品一区二区三区中 | 少妇一晚三次一区二区三区| 亚洲国产日韩在线一区| 国产乱人伦精品一区二区在线观看| 中文字幕在线无码一区二区三区| 亚洲视频一区在线| 国产一区二区精品| 亚洲一区二区三区乱码A| 国产成人久久一区二区不卡三区| 亚洲av日韩综合一区在线观看| 亚洲AⅤ无码一区二区三区在线 | 东京热无码一区二区三区av| 国产在线视频一区二区三区| 大帝AV在线一区二区三区| 韩国美女vip福利一区| 色老头在线一区二区三区| 久久久久成人精品一区二区| 国产亚洲日韩一区二区三区| 上原亚衣一区二区在线观看| 一区二区三区四区电影视频在线观看| 国产成人av一区二区三区在线观看 | 亚洲视频一区二区三区| 一区二区在线视频| 亚洲日本久久一区二区va| 日韩亚洲AV无码一区二区不卡| 久久国产一区二区| 一区高清大胆人体| 国产日韩一区二区三区在线播放| 精品少妇人妻AV一区二区三区| 无码夜色一区二区三区| 精品一区二区久久久久久久网精 | 国产av一区二区三区日韩| 国99精品无码一区二区三区 | 亚洲AV成人精品一区二区三区| 亚州AV综合色区无码一区| 国产精品亚洲一区二区无码| 国产91精品一区二区麻豆亚洲| 国产一区二区精品久久岳| 亚洲爆乳精品无码一区二区三区 | 精品一区二区ww| 午夜视频久久久久一区|