前端自學之路之CSS之position定位

2021-01-07 華哥教你學編程

position標識定位,就類似於百度地圖上一系列定位點,position就是給html元素定位的。

position有四種值:

/**

* 默認未設置的值,沒有任何影響

*/

position: static;

/**

* 相對定位,以默認位置為參照起始點,進行偏移定位

*/

position: relative;

/**

* 絕對定位,以已經定位的最近的祖先元素為參考起始點,進行偏移定位,此時脫

* 離文檔流

*/

position: absolute;

/**

* 固定定位,以瀏覽器窗口為參考起始點,進行偏移定位

*/

position: fixed;

上面所說的偏移定位,到底偏移多少呢?這個時候就要引出標識偏移值的屬性

/**

* left 標識當前元素左邊沿相對於參考起始點左邊沿向右偏移100px

*/

left: 100px;

/**

* right 標識當前元素右邊沿相對於參考起始點右邊沿向左偏移100px

*/

right: 100px;

/**

* top 標識當前元素上邊沿相對於參考起始點上邊沿向下偏移100px

*/

top: 100px;

/**

* bottom 標識當前元素底邊沿相對於參考起始點底邊沿向上偏移100px

*/

bottom: 100px;

關鍵是對以上定位意思和偏移學習了解,必然對元素定位熟悉透徹。

謝謝關注頭條號,關注青少部編程和職業編程

相關焦點

  • CSS之定位一(position屬性)
    本文我們討論涉及定位的position屬性。首先我們來看一下position對應的值及其含義(表1)。relative表示相對定位,在文檔流中仍然佔有空間,其參考對象是離該元素最近的父元素。圖1表示父元素的position值變化時,子元素(position=relative)與父元素的相對位置,由圖可以看出其相對位置不隨父元素的position值變化而變化。
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性,也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。css定位主要有四種,靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式,不能使用top,bottom,left,right和z-index屬性,其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。
  • div+css定位技術之相對定位和絕對定位
    1.relative:相對定位說明:定位元素相對原來的自己進行定位的方式,脫離普通的文檔流,依然佔用原來空間<!Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>Document</title><styletype="text/css
  • 輕輕鬆鬆學CSS:position
    position屬性表示元素的定位類型,在CSS布局中,position發揮著非常重要的作用,一些元素的布局就是用position完成的,鑑於此,本文結合一些小實例詳細講解一下。position屬性在通常情況下有4個可選值,分別是:static、fixed、relative、absolute。
  • 相對定位、絕對定位、固定定位(position)
    定位的元素屬性1.偏移 top:頂部偏移量,定義元素先對於父元素上邊線的距離 bottom:底部偏移量,定義元素先對於父元素下邊線的距離 left:左部偏移量,定義元素先對於父元素左邊線的距離 right:右部偏移量,定義元素先對於父元素右邊線的距離2.定位模式position屬性的常用值 static:自動定位
  • HTML5+CSS+JS時間
    代碼已經部署到伺服器上可以隨時查看:展示部分http://smalldragon.club/當使用go語言製作完一個博客後端的部分後,部署好伺服器後,下一步就是前端部分,那麼首先我們需要問自己的就是.1.前端是什麼?2.前端起什麼作用?3.為什麼要寫前端?
  • 常見的CSS文字居中顯示
    和vertical-align html<div> <span>測試文字</span></div>css.table{ display: table;}.cell{ display: table-cell; vertical-align: middle; text-align: center;}3、利用定位方式position+transform
  • CSS3 transform之scale縮放|transition之過渡動畫調整手記
    試為之。既然是滑鼠移上去後再發生變化,那首先需在css文件中,針對圖片的hover增加個樣式,縮放比例為1.1。css代碼如下:.notice .tab-pal .imgarea {width: 28%;position: relative;display: inline-block;overflow: hidden;}css是個神奇的東西,如同一個大寶庫取之不盡用之不竭,從我從事網頁製作工作接觸css開始,一直以為css很簡單,現在已經超過十五年過去了,我卻發現:還有好多的css
  • 全面掌握CSS基本知識點
    塊級元素未知寬高情況下利用彈性布局.parent{ diplay:flex; justify-content: center; //實現橫軸 align-items:center;}複製代碼使用絕對定位.child{ position:absolute; top:0; left:0; right:0; bottom:0; margin
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言作為一個前端框架的重度使用者,在技術選型上也會非常注意其生態和完整性.筆者先後開發過基於vue,react,angular等框架的項目,碧如vue生態的elementUI, ant-design-vue, iView等成熟的UI框架
  • 學習前端需要知道哪些內容學習起來更容易
    眾所周知,現在是信息爆炸的時代,也是網際網路+的平臺,現在幾乎所有行業都涉及到網絡前端的知識。任何企業都離不開前端,因為我們需要自己的官方網站。我知道有些人開始從各行各業轉行到前端。有受周圍朋友影響的。甚至有感興趣的或者想提升自己的。
  • web前端需要學習什麼?初級階段都要學什麼?
    網絡看到了很多詢問貼子,web前端需要學習什麼?自學要多久?要學習哪些技術?初級階段都要學習什麼?有什麼要求……也有很多朋友在網絡上自學的,也有參加網絡教學的,或者在去一些培訓學校參加培訓Web前端的,都會關心一個「web前端需要學習什麼」?
  • Web前端和後端有什麼區別(下)
    2、了解 css。此處提到的 css不包括css3,通常我們看到在 web前端開發工程師的需求中,會有一個 css+ html或 css+ div用於界面布局,所以 css是用來幫助 html進行布局和顯示的,我們稱之為「css+ div」,為什麼要說 css+ div?由於我在上面說過, div是 html中主要用來布局的,所以 div是最重要的。
  • 使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口
    >在CSS樣式中,position屬性主要用來設置元素的定位。position屬性可以設置不同的定位方式,任何元素都可以定位。絕對定位:是指針對瀏覽器的窗口位置對模態窗口進行定位,固定在一個位置,不會被其它的元素影響。相對定位:是指模態窗口的位置相對於其它元素而進行定位,會受到其它元素的影響。
  • Meta CSS框架發布
    對此,通常有4種解決方法:  1.每種不同款式,定義一個css。按鈕A一個css,按鈕B雖然長得跟A一樣,但是在右邊,那就copy下A的css代碼,然後改成在右邊。很重要的一點,到處都是style會讓人BS的,覺得你這前端div+css用得也忒不好了。所以代碼潔癖的人往往寧可定義一個新樣式,也不願意頁面有一個style。
  • CSS常考知識點
    給元素添加的內聯樣式 (例如 style="font-weight:bold") 總會覆蓋外部樣式表的任何樣式 ,因此可看作是具有最高的優先級面試官:複雜的項目裡往往會遇到樣式給覆蓋的問題,解決此類問題行之有效方法有哪些呢?(拓展題)最簡單的方法是給這個樣式後面增加 !
  • 前端工程化(ES6模塊化和webpack打包css,less,scss,圖片,字體...
    ";m1.js// 當前文件模塊為m2.js// 在當前模塊中執行一個for循環操作for(let i=0;i<3;i++){ console.log(i)}Webpack概念當前Web開發面臨的困境/* 文件依賴關係錯綜複雜 靜態資源請求效率低 模塊化支持不友好 瀏覽器對高級JavaScript特性兼容程度較低*/webpack是一個流行的前端項目構建工具
  • 剖析CSS relative相對定位用法
    剖析CSS relative相對定位用法 上節介紹了CSS絕對定位的概念,這裡和大家分享一下CSS relative相對定位的用法,設置為相對定位的元素框會偏移某個距離。
  • 10個驚人的復古CSS套件
    NES.cssNES-style(8bit-like)的CSS框架,非常適合您的復古瀏覽器遊戲。https://nostalgic-css.github.io/NES.css/RPG UIWeb中用於老式RPG GUI的輕量級純CSS框架;包括按鈕,複選框,