zoukankan      html  css  js  c++  java
  • HTML连载58-绝对定位的参考点以及注意事项

    一、绝对定位参考点

    1.规律:

    (1)默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点。

    <style>
    
            .box1{
    
                width: 300px;
    
                height: 300px;
    
                background-color: red;
    
                /*position:absolute;*/
    
                /*left:0px;*/
    
                /*bottom:0px;*/
    
            }
    
            .box2{
    
                width: 200px;
    
                height: 200px;
    
                background-color: yellow;
    
                position: absolute;
    
                left:0px;
    
                bottom:0px;
    
            }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="box1">
    
        <div class="box2"></div>
    
    </div>
    
     

    (2)如果有一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。

     
    
            .box1{
    
                 300px;
    
                height: 300px;
    
                background-color: red;
    
                position:absolute;
    
                left:0px;
    
                bottom:0px;
    
            }
    
            .box2{
    
                 200px;
    
                height: 200px;
    
                background-color: yellow;
    
                position: absolute;
    
                left:0px;
    
                top:0px;
    
            }
    
     

    注意点:i.只要是这个绝对定位元素的祖先元素都可以。ii.指的定位流是指绝对定位/相对定位/固定定位,定位流中只有静态定位是不行的。

    (3)如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流,那么这个绝对定位的元素会以离它最近的祖先元素作为参考点。

     .......上面的代码不变..........
    
            .box3{
    
                 100px;
    
                height: 100px;
    
                background-color: black;
    
                position:absolute;
    
                right:0px;
    
                bottom:0px;
    
            }
    
     .........省略代码.......
    
     <div class="box1">
    
        <div class="box2">
    
            <div class="box3"></div>
    
        </div>
    
    </div>

    二、绝对定位的注意点

    (1)如果一个绝对定位的元素是以body作为参考点,那么其实是以网页首屏的宽度和高度作为参考点的,而不是以整个网页的宽度和高度作为参考点的。

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>D152_LimeLightOfAbsolutePosition</title>
    
        <style>
    
            .box1{
    
                width: 100px;
    
                height: 100px;
    
                background-color: red;
    
                position:absolute;
    
                bottom:0px;
    
                right:0px;}
    
            .box2{
    
                width: 2000px;
    
                height: 100px;
    
                background-color: blue;
    
                position:
    
            }
    
            .box3{
    
                width: 200px;
    
                height: 2000px;
    
                background-color: black;}
    
    </style>
    
    </head>
    
    <body>
    
    <div class="box1"></div>
    
    <div class="box2"></div>
    
    <div class="box3"></div>
    
    </body>
    
    </html>

    (2)一个绝对定位的元素会忽略祖先元素的padding属性。

           .box4{
    
                height: 300px;
    
                 300px;
    
                background-color: yellow;
    
                padding:50px;
    
                /*position:absolute;*/
    
                /*boder:20px  black ;*/
    
            }
    
            .box5{
    
                height: 100px;
    
                 100px;
    
                background-color: red;
    
                position:absolute;
    
                left:0px;
    
                top:0px;     
    
            }
    
        </style>
    
    </head>
    
    <body>
    
    <div class="box4">
    
        <div class="box5"></div>
    
    </div>
    
     

    三、源码:

    D151_ReferencePointOfAbosulotePositoning.html

    D152_LimeLightOfAbsolutePosition.html

    地址:

    https://github.com/ruigege66/HTML_learning/blob/master/D151_ReferencePointOfAbosulotePositoning.html

    https://github.com/ruigege66/HTML_learning/blob/master/D152_LimeLightOfAbsolutePosition.html

    2.CSDN:https://blog.csdn.net/weixin_44630050

    3.博客园:https://www.cnblogs.com/ruigege0000/

    4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包

     

  • 相关阅读:
    12.SolrCloud原理
    11.SolrCloud集群环境搭建
    10.Solr4.10.3数据导入(DIH全量增量同步Mysql数据)
    9.Solr4.10.3数据导入(post.jar方式和curl方式)
    Java程序设计之最大公约数和最小公倍数
    Java程序设计之正则表达式
    Java程序设计之整数分解
    Java程序设计之裴波拉切那数列(兔子一年的数量)
    Java并发编程实例(synchronized)
    Java程序设计之合租房synchronized(二)
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/12081827.html
Copyright © 2011-2022 走看看