整合營銷服務商

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

          免費咨詢熱線:

          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的效果展示。

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

          ss 中的定位,是布局中常用的一種方法,它可以使html元素脫離文檔流,重新定位。語法如下:

          position: static|relative|absolute|fixed

          position 有四個值,static(默認靜態定位)、relative(相對定位)、absolute(絕對定位)、fixed(固定定位),通常配合left、top及z-index屬性使用(static除外)。

          • left —— 定位元素相對于定位點的左距離
          • top —— 定位元素相對于定位點的上距離
          • z-index ——定位元素的層級,當有多個定位元素上,通過此屬性調整元素的顯示層級,值越大的顯示在最上面。默認如果不設置z-index屬性,則會按照其在文檔流中的先后位置顯示。

          static(靜態定位)

          靜態定位很簡單,html元素默認就是靜態定位,和正常情況下html元素在文檔流中的排版一樣。left、top和z-index屬性對應靜態定位來說不起任何左右,如下圖示例:

          圖1

          圖1中的模塊1,雖然設置了position:static,但是其表現和沒有設置是一樣的,按照標準文檔流進行排版。

          relative(相對定位)

          相對定位是html元素相對于它原來在標準文檔流中的位置來定位的。如果不設置top、left的話它和靜態定位一樣,不同之處就是它可以設置top、left和z-index屬性,如下圖示例:

          代碼:

          圖2

          顯示效果:

          圖3

          圖3中模塊2使用了相對定位,脫離正常的文檔流,相對于原始位置左邊50px,頂部30px,但其在文檔流中的位置依然存在,只是視覺上相對原來的位置有偏移。

          相對定位的元素寬度默認和塊級元素一樣,寬度100%;

          absolute(絕對定位)

          絕對定位時當父級元素也是定位元素(包括相對定位、絕對定位、固定定位)時,它就相對于父級元素的左上角定位,如果父級元素沒有定位或者是靜態定位,那就相對于瀏覽器窗口左上角定位。如下示例:

          代碼:

          圖4

          顯示效果:

          圖5

          圖5中模塊3和模塊2-1都設置為絕對定位,模塊3的父級沒有定位,模塊2-1的父級是模塊2(相對定位)。所以模塊3相對于頁面左上角位置定位,模塊2-1相對于模塊2左上角定位。

          絕對定位不保留原來的位置,完全是脫離文檔流,且其寬度變成不是100%(類似行內元素),它通常都是和有定位的父級元素一塊使用才有意義。

          fixed(固定定位)

          固定定位,通俗講就是固定到屏幕上,它和絕對定位一樣完全脫離文檔流,不保留原來的空間位置。唯一的區別就是它是始終都是相對于瀏覽器窗口左上角定位,不管其父級元素設置了定位。如下示例:

          代碼:

          圖6

          顯示效果:

          圖7

          圖7中模塊4的設置為固定定位,它的父級時模塊2(相對定位),可以看出和模塊2-1(絕對定位)的區別,模塊4不是相對于父級的。

          再看下面這個示例,當滾動滾動條時模塊4始終定在那塊不動。

          圖8

          關于z-index

          注意看上面圖8中,模塊4顯示在模塊3下面,看下圖模塊3的z-index明明比模塊4的小,為什么會顯示在模塊4上面?

          圖9

          原因是模塊4的父級模塊(相對定位),它的z-index是100和模塊3相同,又因為模塊3元素在模塊2元素后面,所以模塊3顯示在模塊4上面,如果把模塊2的z-index改成101,如下圖:

          圖10

          模塊4顯示在模塊3上面了,所以z-index的屬性是同級元素相互進行比較大小。

          總結

          在網頁布局中,定位在早期使用較多,現在不建議過多使用定位,只有在特殊情況下使用,比如返回頂部按鈕效果,或左側導航欄,菜單欄固定定位,不跟隨頁面滾動等。

          本篇主要知識點:

          定位

          行為

          在文檔流中

          static

          默認行為;元素按順序堆疊并相互了解

          是的

          relative

          相對于其在流中的原始位置定位

          是的

          fixed

          相對于瀏覽器窗口定位

          不在

          absolute

          相對于最近的非靜態 ( fixed, relative, absolute) 元素定位

          不在

          感謝關注,歡迎指正錯誤及補充。

          上篇:前端入門——浮動float

          有時候,我們想閱讀頁面中某段精彩的內容,但由于頁面太長,用戶需要自己滾動頁面,查找起來非常麻煩 ,很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好,所以我們可以想辦法 實現點擊某段文字或者圖片跳轉到頁面指定位置,方便用戶的閱讀。

          一、 純 html 實現

          1. 利用 id 為標記的錨點

          這里作為錨點的標簽可以是任意元素。

            <a href="#aa">跳轉到 id 為 aa 標記的錨點</a>
            <p>-------------分隔線-------------</p>
            <div id="aa">a</div>
          

          2. 利用 a 標簽的 name 屬性作為錨點

          這里作為錨點的標簽只能是 a 標簽。

            <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
            <p>-------------分隔線-------------</p>
            <a name="bb">name 為 bb 的 a 標簽的錨點</a>
            <div id="abb">bbb</div>
          

          注意:當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現(即以 name 為錨點和以 id 為錨點名字相同時),會將后者作為錨點。

          二、 js 實現

          1. 利用 scrollTo()

          window.scrollTo 滾動到文檔中的某個坐標。可提供滑動效果,想具體了解 scrollTo() 可以看看 MDN 中的介紹。

          話不多說,看下面代碼

          「html 部分」:

            <a id="linkc">平滑滾動到 c</a>
            <p>-------------分隔線-------------</p>
            <div id="cc">c</div>
          

          「js 部分」:

            var linkc = document.querySelector('#linkc')
            var cc = document.querySelector('#cc')
          
            function to(toEl) {
              // toEl 為指定跳轉到該位置的DOM節點
              let bridge = toEl;
              let body = document.body;
              let height = 0;
              
              // 計算該 DOM 節點到 body 頂部距離
              do {
                height += bridge.offsetTop;
                bridge = bridge.offsetParent;
              } while (bridge !== body)
              
              // 滾動到指定位置
              window.scrollTo({
                top: height,
                behavior: 'smooth'
              })
            }
          
            linkc.addEventListener('click', function () {
              to(cc)
            });
          

          2. 利用 scrollIntoView()

          Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

          下面也直接上代碼

          「html 部分」:

            <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
            <p>-------------分隔線-------------</p>
            <div id="dd">ddd</div>
          

          「js 部分」:

            var dd = document.querySelector('#dd')
          
            function goTo(){
              dd.scrollIntoView()
            }
          

          注意:此功能某些瀏覽器尚在開發中,請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂,所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。

          下面為了方便看效果,把上面的代碼整理在一起。

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
              div {
                width: 600px;
                height: 300px;
                background-color: pink;
              }
            </style>
          </head>
          <body>
            <a href="#aa">跳轉到以 id 為 aa 標記的錨點 a</a>
            <p>-------------分隔線-------------</p>
            <a name="aa">hhh</a>
            <div id="aa">aa</div>
            <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
            <p>-------------分隔線-------------</p>
            <a name="bb">name 為 bb 的 a 標簽的錨點</a>
            <p>-------------分隔線-------------</p>
            <div>bb</div>
            <a id="linkc">平滑滾動到 c</a>
            <p>-------------分隔線-------------</p>
            <div id="cc">cc</div>
            <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
            <p>-------------分隔線-------------</p>
            <div id="dd">dd</div>
            <p>-------------分隔線-------------</p>
            <div></div>
          </body>
          <script>
            var cc = document.querySelector('#cc')
            var linkc = document.querySelector('#linkc')
          
            function to(toEl) {
              //ele為指定跳轉到該位置的DOM節點
              let bridge = toEl;
              let body = document.body;
              let height = 0;
              do {
                height += bridge.offsetTop;
                bridge = bridge.offsetParent;
              } while (bridge !== body)
          
              console.log(height)
              window.scrollTo({
                top: height,
                behavior: 'smooth'
              })
            }
          
            linkc.addEventListener('click', function () {
              to(cc)
            });
          
          </script>
          <script>
            var dd = document.querySelector('#dd')
          
            function goTo(){
              dd.scrollIntoView()
            }
          </script>
          </html>
          

          效果圖:


          主站蜘蛛池模板: 日韩精品一区二区三区中文3d| 亚洲无线码一区二区三区| 一区二区乱子伦在线播放| 天堂va在线高清一区| 国产高清一区二区三区四区| 蜜臀AV一区二区| 国产一区二区精品久久| 精品一区二区三区AV天堂| 成人区精品一区二区不卡亚洲| 国模无码一区二区三区不卡| 日韩在线一区二区三区视频| 亚洲一区二区三区播放在线| 成人区人妻精品一区二区不卡视频 | 国产成人一区二区三区免费视频 | 在线电影一区二区| 亚洲美女视频一区| 国产在线aaa片一区二区99| 波多野结衣中文一区| 亚洲AV网一区二区三区| 亚洲av乱码一区二区三区香蕉| 日本不卡一区二区三区| 熟妇人妻一区二区三区四区| 国产伦精品一区二区三区无广告| 亚洲一区二区三区国产精华液| 久久精品一区二区免费看| 97久久精品午夜一区二区| av无码精品一区二区三区四区| 国产无吗一区二区三区在线欢| 高清精品一区二区三区一区| 乱精品一区字幕二区| 搡老熟女老女人一区二区| 久久精品免费一区二区三区 | 无码少妇一区二区性色AV| 无码aⅴ精品一区二区三区| 精品亚洲AV无码一区二区| 骚片AV蜜桃精品一区| 少妇特黄A一区二区三区| 久久久精品人妻一区二区三区四| 另类一区二区三区| 日本免费一区二区三区四区五六区| 国产精品区一区二区三在线播放|