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-radius 和 border-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上去了。結果和上面一樣的。

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

在線咨詢

上一篇：手機APP和PLC通訊-外網方式
下一篇：第4天 - 16天搞定前端，html文本格式，奇葩說？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商