您現在的位置是:電腦技術吧?>? 基礎知識 ??>??position有哪些屬性,position四個屬性??>??正文詳情

position有哪些屬性,position四個屬性

常又松2019-11-15 16:30:41 人圍觀
簡介position屬性值position屬性決定如何定位元素。大約有五個值:每一頁都可以看作是一堆層,如下圖所示,當position設置為relative時,元素仍處于正常流中,位置為position怎么用

position 這個屬性決定了元素將如何定位。

它的值大概有以下五種:

  每個網頁都可以看成是由一層一層頁面堆疊起來的,如下圖所示。

  position 設置為 relative 的時候,元素依然在普通流中,位置是正常位置,你可以通過 left right 等移動元素。

會影響其他元素的位置。

  而當一個元素的 position 值為 absolute 或 fixed 的時候,會發生三件事:  把該元素往 Z 軸方向移了一層,元素脫離了普通流,所以不再占據原來那層的空間,還會覆蓋下層的元素。

  該元素將變為塊級元素,相當于給該元素設置了 display: block;(給一個內聯元素,如 ,設置 absolute 之后發現它可以設置寬高了)。

  如果該元素是塊級元素,元素的寬度由原來的 width: 100%(占據一行),變為了 auto。

  由此觀之,當 position 設置為 absolute 或 fixed,就沒必要設置 display 為 block 了。

而且如果你不想覆蓋下層的元素,可以設置 z-index 值 達到效果。

  下面來看一下插件的參數用法示例:  1. position:static  所有元素的默認定位都是:position:static,這意味著元素沒有被定位,而且在文檔中出現在它應該在的位置。

  一般來說,不用指定 position:static,除非想要覆蓋之前設置的定位。

  CSS Code復制內容到剪貼板  #div-1 {  position:static;  }

  2. position:relative  如果設定 position:relative,就可以使用 top,bottom,left 和 right 來相對于元素在文檔中應該出現的位置來移動這個元素。

【意思是元素實際上依然占據文檔中的原有位置,只是視覺上相對于它在文檔中的原有位置移動了】  CSS Code復制內容到剪貼板  #div-1 {  position:relative;  top:20px;  left:-40px;  }

  3. position:absolute  當指定 position:absolute 時,元素就脫離了文檔【即在文檔中已經不占據位置了】,可以準確的按照設置的 top,bottom,left 和 right 來定位了。

  CSS Code復制內容到剪貼板  #div-1a {  position:absolute;  top:0;  rightright:0;  width:200px;  }

  4. position:relative position:absolute  如果我們給 div-1 設置 relative 定位,那么 div-1 內的所有元素都會相對 div-1 定位。

如果給 div-1a 設置 absolute 定位,就可以把 div-1a 移動到 div-1 的右上方。

  CSS Code復制內容到剪貼板  #div-1 {  position:relative;  }  #div-1a {  position:absolute;  top:0;  rightright:0;  width:200px;  }

  5. 兩欄絕對定位  現在就可以使用相對定位和絕對定位來做一個兩欄布局了。

  CSS Code復制內容到剪貼板  #div-1 {  position:relative;  }  #div-1a {  position:absolute;  top:0;  rightright:0;  width:200px;  }  #div-1b {  position:absolute;  top:0;  left:0;  width:200px;  }

  6. 兩欄絕對定位定高  一種方案是給元素設定固定高度。

但這種方案對大多數設計來說不太適合,因為一般我們不知道元素中會有多少文本,或者將要使用的精確的字號。

  CSS Code復制內容到剪貼板  #div-1 {  position:relative;  height:250px;  }  #div-1a {  position:absolute;  top:0;  rightright:0;  width:200px;  }  #div-1b {  position:absolute;  top:0;  left:0;  width:200px;  }

版權聲明:本文由 常又松 整理編輯。

原標題:position 屬性,position的幾種屬性

轉載注明出處:http://www.dn9ww09s.icu/basics/12551.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win7重裝installer,win10重裝installer

    win7重裝installer,win10重裝installer 相關圖片win7不能正常進入系統用戶在整理win7系統磁盤時找到了安裝程序文件夾。您想知道是否可以清理安裝程序文件夾嗎?畢竟,安裝程序占用了C盤很大的空間。只有安裝程序文件夾是一個部...

  • hifi有什么用,hifi怎么打開

    hifi有什么用,hifi怎么打開 相關圖片hifi一些手機用戶在手機的宣傳資料或說明書中看到手機支持高保真。有些人不知道hifi是什么意思,但對于喜歡聽音樂的用戶來說,他們非常關心hifi。高保真是英式高配hifi是啥...

  • 走向,就讓我走向你

    走向,就讓我走向你 相關圖片十二正經走向眾所周知,Facebook一直在努力推動開源jsgamebench工具HTML5的發展,首席技術官BRET Taylor也多次提到HTML5的重要性。甚至有傳聞《走向復興》...

  • 閃念膠囊是什么,閃念膠囊怎么用

    閃念膠囊是什么,閃念膠囊怎么用 相關圖片堅果閃念膠囊怎么用flash膠囊是hammer技術的智能語音助手,它可以朗讀文本并保存音頻格式。閃光膠囊操作簡單,可以掛在桌面上。界面很漂亮,有美感和內容語音備忘,您可以長按錘子...

  • 動畫效果怎么設置,ppt切換動畫

    動畫效果怎么設置,ppt切換動畫 相關圖片幻燈片如何取消動畫一些開發者說HTML5將給個人開發者帶來更多的機會。下面詳細介紹一個漂亮的動畫效果,實現登錄表單和注冊表單在同一頁面的轉換。這些效果完全由HTML5和CSS3實怎么...

  • lte服務是什么意思啊,網絡為什么顯示lte

    lte服務是什么意思啊,網絡為什么顯示lte 相關圖片什么是lte小米手機的一些早期版本是LTE版本,但很多用戶不知道LTE在這里的含義。LTE是通用移動通信技術的長期演進,簡單的理解就是3G技術的升級版LTE是英文全稱L什么是lte網絡...

  • 雙卡雙待單通優缺點,雙卡雙待單通怎么切換

    雙卡雙待單通優缺點,雙卡雙待單通怎么切換 相關圖片打電話單通是什么意思除了Android系統的開放性外,很多手機用戶之所以選擇小米移動,是因為Android具有雙卡雙備的功能。不過,有些用戶會了解更多。一些Android手機支持雙僅a卡上網...

  • divcss,divcss布局模板

    divcss,divcss布局模板 相關圖片css本文以div CSS為例,實現了豬八戒首頁的導航菜單效果。與您分享以供參考。具體內容如下:這是模仿2010年豬八戒首頁的頁面導航菜單。它的藍色風格,非常漂亮,大什么是css...

  • 手機如何打省略號,O上邊有個省略號怎么打

    手機如何打省略號,O上邊有個省略號怎么打 相關圖片縮略號怎么打省略號是我們在聊天和文檔輸入中經常使用的符號。當你想用省略號的時候,你怎么打?一。打開輸入法,注意輸入法應為中文標點狀態,而不是英文標點狀態2。按鍵盤什...

  • 私有倉庫搭建,私有helm倉庫搭建

    私有倉庫搭建,私有helm倉庫搭建 相關圖片maven私有倉庫一。Docker registry描述了本文中記錄的設置Docker注冊表的完整操作過程。雖然官方提供dockerhub作為一個開放的集中倉庫,但可以想象,中國nexus 搭建 私有倉庫...

熱評文章

  • 后續ota是什么意思,ota升級怎么弄

    后續ota是什么意思,ota升級怎么弄 相關圖片電視ota升級怎么辦無論是Android還是蘋果,用戶每隔一次升級系統時都會被提示通過OTA進行升級。OTA升級意味著什么?本文以Android陣營的小米為例,講述了OTA升級的含ota工作經驗指什么...

  • 視差效果,視差

    視差效果,視差 相關圖片視差貼圖視差效應在互聯網上越來越流行。如果你還沒有聽說過視差效應,那實際上就是用圖片形成不同的圖層,分別以不同的速度和方向移動的效果。這將產生一個非常美妙的視覺效...

  • photo booth怎么用,photobooth有什么用嗎

    photo booth怎么用,photobooth有什么用嗎 相關圖片photobooth什么意思一些iPhone用戶已經在手機上找到了photo booth的功能,但有些人不知道它是什么。Photo booth是一個針對Mac和IOS的小程序。它的主要功能photo booth哪一年出的...

  • 應用程序,應用程序在哪

    應用程序,應用程序在哪 相關圖片應用程序安裝包互聯網上有很多設計和開發工具,但很少有易于使用和免費的,所以今天的文章向您展示了8個很酷的HTML5應用程序。這些令人驚嘆的HTML5應用讓你體驗到了網絡技術的隱藏...

  • photo booth拍視頻,蘋果photobooth在哪

    photo booth拍視頻,蘋果photobooth在哪 相關圖片photo boothPhoto booth是蘋果設備上的一個小應用。它的主要功能是通過攝像機拍攝數碼照片。攝影棚內置17種特效。照片顯示后,用戶可以使用photobooth有什么用嗎...

  • applepencil怎么用,applepencil有什么用

    applepencil怎么用,applepencil有什么用 相關圖片applepencil1使用教程蘋果筆是蘋果公司的智能筆,帶有壓力傳感器,也被稱為電容筆。它可以同時與用戶的手指一起使用。配有閃電接口,支持無線充電。2015年發布,iPadapplepencil2適用機型...

  • 鋸齒王冠代碼,伊斯本代碼

    鋸齒王冠代碼,伊斯本代碼 相關圖片上古卷軸五鋸齒王冠代碼圖:提示:將代碼復制到一個HTML文件并保存。直接打開看效果。實現代碼:代碼如下:!DOCTYPE htmlhtmllang=zhheadmetacharset鋸齒王冠能保留嗎...

  • lbe安全大師好用嗎,比lbe安全大師更好

    lbe安全大師好用嗎,比lbe安全大師更好 相關圖片安全大師哪個好用現在Android手機都是內置的安全中心,但一些用戶仍然認為使用起來并不容易。他們喜歡使用第三方安全中心。第三方安全中心使用更多的LBE安全主機和360。哪一個那個...

  • 三角箭頭,三角箭頭圖標

    三角箭頭,三角箭頭圖標 相關圖片三箭頭使用CSS制作不帶圖片和箭頭的div box(此代碼更適合追求純代碼的人)這種效果也可以用圖片背景實現,代碼將更加簡潔CSS代碼:CSS代碼將內容復制到剪貼板d箭頭...

  • 國內怎么用google日歷,google 日歷

    國內怎么用google日歷,google 日歷 相關圖片google日歷同步不能卸載谷歌日歷能在國內使用嗎?這是許多安卓用戶提出的問題之一。Google日歷以其簡單、易用、功能強大、支持跨平臺同步等特點受到Android用戶的青睞。不幸的是,它...

關注微信

变脸官网查询