整合營銷服務商

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

          免費咨詢熱線:

          HTML中的定位

          次我們來說一下,HTML網頁中的定位,有很多小伙伴一定好奇,為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中,我們的各種樣式,標簽,圖片等東西都是出現在網頁的各個位置,網頁看起來很美觀,各種盒模型擺放合理,這是因為在HTML中有定位的能力,今天我們就來學習一下。

          position在英語中是位置的意思,而在我們CSS代碼中position也是跟位置有關的,position有三個屬性值分別為relative(相對定位:相對于自己原來的位置進行定位,但保留自己原來的位置,別的元素無法占用),absolute(絕對定位:相對于有定位的父級進行定位,如果沒有則相對于文檔進行定位,定位會脫離文檔,不保留原來的位置,會和原來的文檔不在一個層),fixed(位置定位:他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告,他也會脫離文檔流)。

          我們說完了position,接下來我們就說說他是怎么進行定位的,我們有left,top,right,bottom,五個屬性分別對應 距左邊,距上邊,距右邊,距下邊,大家注意到我在每個方向前都加了個字,我們所做的定位是距各個方向的距離而不是移動,例:left:200px,是向右移動200像素,他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom,我們知道,滑輪是可以一直往下滑的,所以我們相對于底部定位的話就很困難。

          我們來通過代碼和結果來看一下:


          沒有定位的樣式


          加了relative


          加了relative的結果

          上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]

          我們可以看出貓圖片并沒有移動,而是給兔子圖片留著位置。


          加了absolute


          加了absolute的結果

          這個結果我們可以看出貓圖片向前移動了,并沒有保留兔子圖片原來的位置


          加了fixed

          代碼中的<br>是為了使滑輪可以滑動,以便更好的展示效果。

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          用了fixed的效果展示。

          以上的代碼樣式只對兔子圖片起作用,我沒有給貓添加任何樣式,貓圖片只是作為參照物。

          家好,我是IT共享者,人稱皮皮。這篇我們來講講CSS定位。

          一、Position(定位)

          CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面,并指定一個元素的內容太大時,應該發生什么。

          元素可以使用的頂部,底部,左側和右側屬性定位。然而,這些屬性無法工作,除非是先設定position屬性。他們也有不同的工作方式,這取決于定位方法。


          二、屬性

          1. Static 定位(默認效果)

          HTML元素的默認值,即沒有定位,元素出現在正常的流中。

          靜態定位的元素不會受到top, bottom, left, right影響。

          2. Fixed 定位

          元素的位置相對于瀏覽器窗口是固定位置。

          即使窗口是滾動的它也不會移動:

          <!DOCTYPE html>
          <html>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=640, user-scalable=no">
              <head>
                  <style>
                      p.pos_fixed {
                          position: fixed;
                          top: 30px;
                          right: 5px;
                      }
          </style>
              </head>
          
          
              <body>
          
          
                  <p class="pos_fixed">Some more text</p>
                  <p><b>Note:</b> 代碼使人進步!!!.</p>
                  <p>Some text</p>
                  <p>Some text</p>
                  <p>Some text</p>
                  <p>Some text</p>
          
          
              </body>
          
          
          </html>

          注意:

          Fixed定位使元素的位置與文檔流無關,因此不占據空間。

          Fixed定位的元素和其他元素重疊。

          3. Relative 定位

          相對定位元素的定位是相對其正常位置。

          <!DOCTYPE html>
          <html>
              <meta charset="utf-8">
              <meta name="viewport" content="width=640, user-scalable=no">
              <title> 定位</title>
          
          
              <head>
                  <style>
                      h2.pos_left {
                          position: relative;
                          left: -20px;
                      }
          
          
                      h2.pos_right {
                          position: relative;
                          left: 20px;
                      }
          </style>
              </head>
          
          
              <body style="background-color:azure;">
          
          
                  <p>Some more text</p>
                  <p><b>Note:</b> 代碼使人進步!!!.</p>
                  <h2 class="pos_left">This heading is moved left according to its normal position</h2>
                  <h2 class="pos_right">This heading is moved right according to its normal position</h2>
          
          
              </body>
          
          
          </html>

          可以移動的相對定位元素的內容和相互重疊的元素,它原本所占的空間不會改變。

          h2.pos_top{
              position:relative;
              top:-50px;
          }

          相對定位元素經常被用來作為絕對定位元素的容器塊。

          4. Absolute 定位

          絕對定位的元素的位置相對于最近的已定位父元素,如果元素沒有已定位的父元素,那么它的位置相對于<html>:

          h2{
              position:absolute;
              left:100px;
              top:150px;
          }

          Absolutely定位使元素的位置與文檔流無關,因此不占據空間。

          Absolutely定位的元素和其他元素重疊。


          三、重疊的元素

          元素的定位與文檔流無關,所以它們可以覆蓋頁面上的其它元素

          z-index屬性指定了一個元素的堆疊順序(哪個元素應該放在前面,或后面)

          一個元素可以有正數或負數的堆疊順序:

          img{
              position:absolute;
              left:0px;
              top:0px;
              z-index:-1;
          }

          具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

          注意: 如果兩個定位元素重疊,沒有指定z - index,最后定位在HTML代碼中的元素將被顯示在最前面。


          四、總結

          本文基于Html基礎,主要介紹了CSS中四種定位的方式。對于四種的定位表現形式,用豐富的案例 ,代碼效果圖的展示,幫助大家更好理解 。

          最后,希望可以幫助大家更好的學習CSS3。



          前面文章中寫過類似的文章《手把手教你HTML5實現根據LBS定位到商家兩點之間距離多少》,建議有興趣的小伙伴可以看看。

          使用 HTML5 Geolocation API 來構建基于地理位置的應用~

          各種瀏覽器對HTML5 Geolocation 的支持

          瀏覽器 版本 只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -

          出于安全考慮,部分瀏覽器只允許通過HTTPS協議使用 Geolocation API。在HTTP協議下使用Geolocation API 瀏覽器會拋出異常,在開發階段,127.0.0.1和localhost 等本地域在兩種協議下均可使用。

          Geolocation API 通過 navigator.geolocation 全局對象進行訪問,第一次訪問的時候會詢問用戶是否允許共享位置。

          判斷瀏覽器是否支持 Geolocation API

                  // 判斷瀏覽器屬否支持獲取位置
                  if(navigator.geolocation){
                      console.log("可以獲取");
                  }else{
                      console.log("不支持");
                  }
          

          實例代碼如下:

          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
          </head>
          
          <body>
              獲取用戶地理位置
              <input type="button" value="點擊獲取位置" id="btn">
              <script>
                  let btnBtn = document.getElementById('btn')
                  btnBtn.onclick = () => { // 點擊事件
                          getAdd()
                      }
                      // 成功回調
                  let success = (position) => {
                          console.log(`獲取位置成功:${position.coords}`);
                          console.log(position.coords); // 獲取坐標信息
                          // coords的常用屬性
                          console.log(position.coords.latitude); // 獲取坐標緯度
                          console.log(position.coords.longitude); // 獲取坐標經度
                          console.log(position.coords.accuracy); // 獲取坐標精度,單位為米
                          console.log(position.timestamp); // 獲取位置的時間戳
          
                      }
                      // 失敗回調
                  let error = (positionErr) => {
                      console.log(`獲取位置失敗:${positionErr.code}+${positionErr.message}`);
                  }
          
                  let options = {
                      enableHightAccuracy: false, // 獲取高精度的位置信息,可能會增加響應時間,默認是false
                      timeout: 30000, // 設置超時時間,單位毫秒,如果到達設定的時間沒獲取到信息則回觸發失敗回調,默認值為0,無限大
                      maximumAge: 0 // 設置用戶位置信息緩存的最大時間
                  }
                  let getAdd = () => {
                      navigator.geolocation.getCurrentPosition(success, error, options)
                  }
          
          
                  // 判斷瀏覽器屬否支持獲取位置
                  if(navigator.geolocation){
                      console.log("可以獲取");
                  }else{
                      console.log("不支持");
                  }
              </script>
          </body>
          
          </html>
          

          當獲取位置失敗時,會調用失敗回調(error函數)。返回的參數<positionErr.code 標識錯誤的原因><positionErr.message錯誤信息描述> positionErr.code 值

          • UNKNOWN_ERROR(0): 其他錯誤
          • PERMISSION_DENIED(1): 用戶拒絕分享位置信息
          • POSITION_UNAVAILABLE(2): 獲取用戶位置信息失敗
          • TIMEOUT(3): 獲取用戶位置信息超時

          推薦文章

          《手把手教你HTML5實現根據LBS定位到商家兩點之間距離多少》
          作者:藍海00
          鏈接:https://www.jianshu.com/p/d0b0b6120055


          主站蜘蛛池模板: 日产一区日产2区| 日韩人妻一区二区三区免费| 亚洲国产成人精品久久久国产成人一区二区三区综 | 国产麻豆剧果冻传媒一区 | www亚洲精品少妇裸乳一区二区| 国产伦精品一区二区三区免.费| 国产乱码伦精品一区二区三区麻豆| 久久精品一区二区三区中文字幕| 国产一区二区精品尤物| 秋霞无码一区二区| 国内精品视频一区二区三区 | 人妻久久久一区二区三区| 久久精品无码一区二区三区不卡| 国产亚洲综合一区二区三区| 一夲道无码人妻精品一区二区| 精品国产AV一区二区三区| 男人的天堂精品国产一区| 国产精品日本一区二区不卡视频| 狠狠色综合一区二区| 亚洲av成人一区二区三区在线观看| 亚洲A∨无码一区二区三区 | 成人精品一区久久久久| 日本高清成本人视频一区| 无码人妻久久一区二区三区免费丨| 一区五十路在线中出| 国产成人综合一区精品| 91一区二区三区| 91一区二区三区| 国产精品电影一区二区三区| 久久精品国产免费一区| 国产AV天堂无码一区二区三区| 麻豆国产一区二区在线观看| 精品国产免费一区二区三区| 久久蜜桃精品一区二区三区| 国产AV一区二区三区无码野战| 国产一区二区三区福利| 日本在线视频一区二区| 国产精品va无码一区二区| 日韩有码一区二区| 色欲AV蜜桃一区二区三| 精品亚洲A∨无码一区二区三区 |