整合營銷服務商

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

          免費咨詢熱線:

          CSS 父元素中的絕對定位

          position屬性實現絕對定位

          <html>
          <head>
          <title>position屬性</title>
          <style type="text/css">
          <!--
          body{
              margin:10px;
              font-family:Arial;
              font-size:13px;
          }
          #father{
              background-color:#a0c8ff;
              border:1px dashed #000000;
              width:100%;
              height:100%;
          }
          #block{
              background-color:#fff0ac;
              border:1px dashed #000000;
              padding:10px;
              position:absolute; /* absolute絕對定位 */
              left:20px; /* 塊的左邊框離頁面左邊界20px */
              top:40px; /* 塊的上邊框離頁面上邊界40px */
          }
          -->
          </style>
          </head>
          <body>
          <div id="father">
          <div id="block">absolute</div>
          </div>
          </body>
          </html>

          以上的代碼我們可以看出父塊#father沒有設置position屬性,而子塊#block采用的是絕對定位,經過測試發現子塊#block參照瀏覽窗口左上角

          為原點,子塊左邊框相對頁面<body>左邊的距離為20px,子塊的上邊框相對頁面<body>上面的距離為40px

          為父塊這是position屬性

          #father{
              background-color:#a0c8ff;
              border:1px dashed #000000;
              position:relative;
              width:100%;
              height:100%;
          }

          我們發現子塊的參照物為父塊的#father,距左側20px,距上端40px

          注意top、right、bottom、left這4個CSS屬性,它們都是配合position屬性使用的,表示的是塊的各個邊界離頁面邊框(position設置為absolute時)

          或者原來的位置(position設置為relative)的距離。只有當position屬性設置為absolute或者relative時才能生效;

          用position屬性實現相對定位

          <html>
          <head>
          <title>position屬性</title>
          <style type="text/css">
          <!--
          body{
              margin:10px;
              font-family:Arial;
              font-size:13px;
          }
          #father{
              background-color:#a0c8ff;
              border:1px dashed #000000;
              width:100%; height:100%;
              padding:5px;
          }
          #block1{
              background-color:#fff0ac;
              border:1px dashed #000000;
              padding:10px;
              position:relative; /* relative相對定位 */
              left:15px; /* 子塊的左邊框距離它原來的位置15px */
              top:10%;
          }
          -->
          </style>
          </head>
          <body>
          <div id="father">
          <div id="block1">relative</div>
          </div>
          </body>
          </html>

          我們可以看到字塊的左邊框相對于其父塊的左邊框(它原來所在的位置)距離為15px,上邊框也是一樣的道理,為10%;

          理解"它原來的位置":子塊和父塊原先的位置的是一致的(因為父塊包含字塊,視覺上看是幾乎重疊的)

          此時子塊的寬度依然是未移動前的寬度,撐滿未移動前父塊的內容。只是由于向右移動了,因此右邊框超出了父塊。

          如果希望子塊的寬度僅僅為其內容加上自己的padding值,可以將它的float屬性設置為left,或者指定其寬度width;

          案例: 文本在圖片上顯示

          、瀏覽器支持

          表中的數字指定完全支持該屬性的第一個瀏覽器版本。

          數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。

          屬性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5


          二、border-radius 屬性

          1. 創建具有背景圖的圓角

          CSS3中,可以使用border-radius屬性,為元素指定圓角顯示。

          代碼如下:

          <!DOCTYPE html>
              <html>
              <meta charset="UTF-8">
              <title>項目</title>
          
              <head>
                  <style>
                      #rcorners1 {
                          border-radius: 25px;
                          background: #f00;
                          padding: 20px;
                          width: 200px;
                          height: 150px;
                      }
          
                      #rcorners2 {
                          border-radius: 25px;
                          border: 2px solid #73AD21;
                          padding: 20px;
                          width: 200px;
                          height: 150px;
                      }
          
                      #rcorners3 {
                          border-radius: 25px;
                          background: url(img/fy_indexBg.jpg);
                          background-position: left top;
                          background-repeat: repeat;
                          padding: 20px;
                          width: 200px;
                          height: 150px;
                      }
          </style>
              </head>
          
              <body>
          
                  <p>The border-radius property allows you to add rounded corners to elements.</p>
                  <p>Rounded corners for an element with a specified background color:</p>
                  <!--1.具有指定背景色的圓角元素-->
                  <p id="rcorners1">Rounded corners!</p>
                  <p>Rounded corners for an element with a border:</p>
                  <!--2.帶邊框的圓角元素:-->
                  <p id="rcorners2">Rounded corners!</p>
                  <!--3.帶背景圖的圓角元素-->
                  <p>Rounded corners for an element with a background image:</p>
                  <p id="rcorners3">Rounded corners!</p>
          
              </body>
          
          </html>
          

          提示:

          border-radius屬性實際是border-top-left-radius, border-top-right-radius, border-bottom-right-radiusborder-bottom-left-radius 屬性的簡寫。


          2. 為每個角指定弧度

          如果只為border-radius屬性指定一個值,則此半徑將應用于所有4個角。

          另外可以根據自己開發的需求,分別指定每個角。以下是規則:

          四個值: 第一個值適用于左上角,第二個值適用于右上方,第三值應用于右下角,第四值適用于左下角。

          三個值: 第一個值適用于左上,二值適用于右上和左下,右下第三值適用于。

          兩個值: 第一個值適用于左上和右下角,和二值適用于右上和左下角。

          一個值: 所有的四個角都是圓的。

          實例1:

          1.四個值 - border-radius: 15px 50px 30px 5px

          #rcorners4 {
              border-radius: 15px 50px 30px 5px;
              background: #f00;
              padding: 20px;
              width: 200px;
              height: 150px;
          }
          

          2.三個值 - border-radius: 15px 50px 30px

          #rcorners5 {
              border-radius: 15px 50px 30px;
              background: #f00;
              padding: 20px;
              width: 200px;
              height: 150px;
          }
          

          3.兩個值 - border-radius: 15px 50px

          #rcorners6 {
              border-radius: 15px 50px;
              background: #f00;
              padding: 20px;
              width: 200px;
              height: 150px;
          }
          

          完整代碼 :

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>項目</title>
            <style>
            #rcorners4 {
                border-radius: 15px 50px 30px 5px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
          
            #rcorners5 {
                border-radius: 15px 50px 30px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
          
            #rcorners6 {
                border-radius: 15px 50px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
          </style>
          </head>
          <body>
          
          <p>四個值 - border-radius: 15px 50px 30px 5px:</p>
          <p id="rcorners4"></p>
          
          <p>三個值 - border-radius: 15px 50px 30px:</p>
          <p id="rcorners5"></p>
          
          <p>兩個值 - border-radius: 15px 50px:</p>
          <p id="rcorners6"></p>
          
          </body>
          </html> 
          

          實例2:

          創建橢圓形的圓角

          創建橢圓形的圓角

          橢圓邊框 :border-radius: 50px/15px

          #rcorners7 {
              border-radius: 50px/15px;
              background: #73AD21;
              padding: 20px;
              width: 200px;
              height: 150px;
          }
          

          橢圓邊框 : border-radius: 15px/50px

          #rcorners8 {
                  border-radius: 15px/50px;
                  background: #73AD21;
                  padding: 20px;
                  width: 200px;
                  height: 150px;
              }
          

          橢圓邊框 : border-radius: 50%

          #rcorners9 {
                  border-radius: 50%;
                  background: #73AD21;
                  padding: 20px;
                  width: 200px;
                  height: 150px;
              }
          

          完整代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>項目</title>
            <style>
              #rcorners7 {
                  border-radius: 50px/15px;
                  background: #73AD21;
                  padding: 20px;
                  width: 200px;
                  height: 150px;
              }
          
              #rcorners8 {
                  border-radius: 15px/50px;
                  background: #73AD21;
                  padding: 20px;
                  width: 200px;
                  height: 150px;
              }
          
              #rcorners9 {
                  border-radius: 50%;
                  background: #73AD21;
                  padding: 20px;
                  width: 200px;
                  height: 150px;
              }
          </style>
          </head>
          <body>
          
            <p>橢圓邊框 - border-radius: 50px/15px:</p>
            <p id="rcorners7"></p>
          
            <p>橢圓邊框 - border-radius: 15px/50px:</p>
            <p id="rcorners8"></p>
          
            <p>橢圓邊框 - border-radius: 50%:</p>
            <p id="rcorners9"></p>-->
          
          </body>
          </html>
          

          三、總結

          1、本文主要講解了CSS3圓角,通過一些屬性的演示,豐富的案例,幫助大家理解CSS知識。希望大家可以耐心去學習,同時希望碰到問題主動搜索,嘗試一下,總會有解決方法。

          2、代碼很簡單,希望能幫到你。

          想學習更多Python網絡爬蟲與數據挖掘知識,可前往專業網站:http://pdcfighting.com/

          段時間在寫組件,頁面有一個輸入框,點擊輸入框,彈出一個國家控件或者是城市控件。但是這個控件的位置該如何放一直是一個頭疼的問題??赡苁情_始沒有沉下心來想,總覺得這是個技術難題,還在網上和群里 向很多高手請教,他們給出的答案也并不是我想要的。最后不得不自己想想該如何解決這個問題了,現在把自己的一些思考寫出來,一來防止忘記,二來也算個分享。

          思路:

          前提條件:只能拿到一個輸入框對象。

          1、position的取值:absolute、relative和fixed三種。relative是相對定位,很明顯不適合,因為在實際操作中,根本不確定input是否有父節點,以及父節點的定位是什么,那么相對定位,相對的對象是不可知的,所以可以排除relative。其次是固定定位fixed,這個也是不可行的。舉個簡單的例子,如果把控件定位到(100,100)的位置,那么如果有滾動條,該控件不會跟著頁面滾動,要是還是不明白,想想博客園頁面上回到頂部的功能就應該明白了。

          2、經過以上思考,至少可以確定,控件的position一定是absolute了,那么它的left值和top值該怎么計算呢?肯定要先從input輸入框入手。

          3、由于在開發中用的jquery庫,那么首先想到的就是$.offset方法,查看API得知,offset是用于設置或返回當前匹配元素相對于當前文檔的偏移,也就是相對于當前文檔的坐標,說白了就是獲取當前元素的絕對位置。且該位置是相對于當前文檔(頁面)的。既然是這樣,控件的left就應該是當前元素的left值,控件的top就應該是當前元素的top值加上當前元素的自身高度了。為了驗證,立馬寫了一個例子:

          <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="UTF-8">
                  <title></title>
              <script type="text/javascript" src="demo/jquery-1.9.1.js" ></script>
              <style type="text/css">
                  .layer{width:400px; height:300px; background:red;position: absolute;}
              </style>
              </head>
              <body style="height:2000px;">
                  <input type="text" id="input1" placeholder="請選擇 "  style="margin-top:100px;" onclick="addLayer;"/>
              </body>
          </html>
          <script type="text/javascript">
              function addLayer{
                  var pointer = $("#input1").offset;
                  var $div = $("<div class='layer'></div>");
                  $div.css({left:pointer.left, top:pointer.top+$("#input1").height});
                  $("body").append($div);
              }
          </script>

          運行正常,也不會隨著滾動條的變動而變動位置,很不錯。

          4、然而由于我的整個項目是用的angular的路由來控制的,左邊是導航,右邊是內容區,發現異常了,控件和input輸入框分離了,找了半天原因,也沒找到,開始懷疑自己寫的控件有問題,亦或計算位置的思路不正確?糾結了半天,沒找到問題的原因,最后不得不用那萬能的排除法了。

          5、怎么排除呢?首先在網上找了一個日歷控件(My97 datepicker),引用進來,發現還是存在這個問題。非常開心,看來不是控件寫的有問題,那到底是啥原因呢?繼續找。。。。。

          6、然后各種實驗,最后終于找到原因了:滾動條的問題,如果不是body的滾動條或者是iframe的滾動條,就會遇到這個問題。其實沉下心來想想,很容易就想通,因為offset是根據document計算的相對偏移量,雖然input框所在的區域包含滾動條,但是這個滾動條不是屬于document的,所以在滾動的時候,input會隨著走,而控件始終留在相對于document的位置。另外,input會跟著動,是因為input并不是根據document來定位的。也就是說,我控件的位置是根據input相對于document的偏移量來獲取的,但是并不代表input的位置就是按照這個偏移量來設置的。

           1 <!DOCTYPE html>
           2 <html>
           3     <head>
           4         <meta charset="UTF-8">
           5         <title></title>
           6     <script type="text/javascript" src="demo/jquery-1.9.1.js" ></script>
           7     <style type="text/css">
           8         .layer{width:400px; height:300px; background:red;position: absolute;}
           9         .wrap{height:500px;overflow: auto;}
          10         .inner{height:1000px;}
          11     </style>
          12     </head>
          13     <body style="height:2000px;">
          14         <div class="wrap">
          15 <div class="inner">
          16 <input type="text" id="input1" placeholder="請選擇 "  style="margin-top:100px;" onclick="addLayer;"/>
          17 </div>
          18         </div>
          19     </body>
          20 </html>
          21 <script type="text/javascript">
          22     function addLayer{
          23         var pointer = $("#input1").offset;
          24         var $div = $("<div class='layer'></div>");
          25         $div.css({left:pointer.left, top:pointer.top+$("#input1").height});
          26         $("body").append($div);
          27     }
          28 </script>

          7、看來這個問題真是沒辦法解決了,真的沒有辦法呢?不死心,接著想。。。。。

          8、一不小心,又發現了jquery的position方法,那就用這個方法試試,思路是先用position方法獲取input相對父元素的偏移量,然后給控件設置位置。另外用遞歸查找input的所有父元素中第一個position為relative的的父元素,把控件append上去。實驗表明,如果input的父節點直接是relative的,沒有問題,但是要是input的所有父節點都沒有,最后還是找到body上去了。結果和上面一樣的。

          最后結論:最初的方法應該就是正確的方法。所以有時候真的沒有必要把問題想的太復雜了,否則進入死巷子出不來。


          主站蜘蛛池模板: 亚洲一区精品视频在线| 一区二区三区免费电影| 久久久精品人妻一区二区三区蜜桃| 国产一区二区三区在线观看影院| 在线播放国产一区二区三区 | 国产MD视频一区二区三区| 日本一区二区三区精品国产 | 亚洲国产成人久久一区二区三区 | 99久久精品国产高清一区二区 | 精品一区二区三区四区| 伊人久久精品一区二区三区 | 国产精品主播一区二区| 国产Av一区二区精品久久| 亚州AV综合色区无码一区| 99精品一区二区三区无码吞精| 精品一区二区三区在线观看l| 国产伦精品一区二区三区精品| 无码人妻精品一区二区三区不卡| 亚洲AⅤ视频一区二区三区| 久久精品免费一区二区三区| 精品一区狼人国产在线| 精品免费国产一区二区三区| 国产在线观看精品一区二区三区91| 精品国产一区二区三区久久狼| 一区一区三区产品乱码| 在线一区二区观看| 国产在线步兵一区二区三区| 久久精品一区二区三区AV| 天堂一区二区三区精品| 视频在线一区二区三区| 国产综合无码一区二区辣椒| 中文字幕精品一区二区2021年| 亚洲一区精品无码| 日本丰满少妇一区二区三区| 亚洲一区在线免费观看| 一区二区三区亚洲| 熟女少妇精品一区二区| 久久国产香蕉一区精品| 久草新视频一区二区三区| 精品视频一区二区三区在线观看| 爆乳熟妇一区二区三区|