分享

css position=absolute之相对父元素定位

 bleach尸魂界 2014-08-07
本资源引自:
position=absolute之相对父元素定位-css-电脑编程网
http://biancheng./css/464130.html
------------------------------------------------------------------------------------------------------------------------------------

position=absolute之相对父元素定位

1、问题: 
如果 position : absolute ,如何又相对定位? 
就是相对父元素,的绝对定位。 
2、答案 
当 父元素 的 position 设为 relative 时, 
其子元素的 absolute position 是按照父元素的相对位置来的 
3、示例 
<html><head>
         <style type="text/css">
         h2.pos_abs{     position:absolute;
                         left:0px;
                         top:0px;
                         margin:0;padding:0;
                
         }
         .a{             position:relative;
                         left:0px;
                         top:0px;
                         width:400px;
                         margin:0;padding:0;                
         }</style>
   </head>
   <body>
    <p>通过绝对定位,元素可以放置到页面上的任何位置。</p>
    <div class="a">
       <h2 class="pos_abs">这是带有绝对定位的标题</h2>
    </div>
</body></html>

效果: 
css, position, absolute, 相对, 定位 position=absolute之相对父元素定位

分析: 
h2标题的 class 属性,position设为 absolute ,其 top = left = 0 , 
如果没有父元素,它应该显示在 页面最左上角,覆盖掉 p 的内容。 

实际,由于它的父元素的 position 设置为 relative,排在了 p 的下面 ,所以它的 绝对位置, 是相对于父元素的位置的。故:显示在 p 的下方。 
4、api参考 
下面是w3school的一段说明: 
css, position, absolute, 相对, 定位 position=absolute之相对父元素定位
absolute:相对于 static 定位以外的第一个父元素进行定位。 
          也就是父元素的position取值可以是:absolute fixed relative inherit 
          显然,最可能和常用的取值是 relative 
5、原理 
绝对定位 
绝对定位使元素在文档流中不占据任何空间。 
(文档流中的其它元素的布局就像绝对定位的元素不存在一样)。 

这一点与相对定位不同,相对定位的元素实际上被看作普通流定位模型的一部分, 
它占据普通流中的空间,也会影响到普通流中其它元素的布局。 
6、对比、拓展 
float 
css 另外一个属性 float 也会使元素脱离文档流,不占据普通流中的空间。 
http://www.w3school.com.cn/css/css_positioning_floating.asp 
css, position, absolute, 相对, 定位 position=absolute之相对父元素定位





clear属性 
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。(自己新起一行) 
下面的例子中(右边第一个图),对段落二使用了clear:left 

比较: 
position = absolute ;其实是 float 的一个特例。 
是规定了 top 和 left 的 float. 
-

相关资料:

position=absolute之相对父元素定位来源网络,如有侵权请告知,即处理!

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多