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小时内与您取得联系。

整合营销服务商