zoukankan      html  css  js  c++  java
  • CSS中的绝对定位(absolute)误区

    这几天在慕课上看视频学习,偶然听到几个老师都说:CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position:relative。注意,前面一句是没有问题的,在没有父元素设置定位的话,默认就是以body来定位的,但是后面一句,要想相对父元素定位,父元素必须设置相对定位(relative),根据我的开发经验和查阅相关资料确认后发现,这是不对的。

    正确的理解姿势是:

    相对定位:相对于块级元素(或行内块)自身位置进行定位;

    绝对定位:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);

    注意css描述的绝对定位概念,没有说明是离他最近的一个已相对定位的盒子进行定位的,所以离他最近的盒子的定位可以是相对定位(relative)和绝对定位(absolute)的,但是在开发中,一般是父盒子设置相对定位的,但是不代表只能是相对定位,举个栗子:

    HTML:

    1 <div class="father">
    2   <div class="son"></div>
    3 </div>

    CSS:

     1 .father{
     2       width: 300px;
     3       height: 300px;
     4       background-color: orange;
     5       position: absolute;
     6       top:50%;
     7       left:50%;
     8       margin-top: -150px;
     9       margin-left: -150px;
    10     }
    11     .son{
    12       width: 100px;
    13       height: 100px;
    14       background-color: pink;
    15       position: absolute;
    16       left:0;
    17       top:0;
    18     }

    .father元素绝对定位是相对body的,这个没问题,主要看.son元素,他自身设置绝对定位,父元素.father也有绝对定位,你觉得这个子元素会相对body定位还是父元素来定位呢?

    结果为:子元素是相对于有绝对定位的父元素来定位的,而不是body;

  • 相关阅读:
    在C#中运用SQLDMO备份和恢复SQL Server数据库(转)
    c#中分割字符串的几种方法
    MS SQL Server中的日期格式化大全
    IBM基于双机热备份配置
    C#实现Des加密和解密
    ASP.NET备份恢复SqlServer数据库
    WEB 打印的相关技术分析
    通过身份证号码取得生日的一段代码(支持18位和15位身份证)
    C#的四种排序算法
    .net下读写配置文件app.config方法
  • 原文地址:https://www.cnblogs.com/hjvsdr/p/7339638.html
Copyright © 2011-2022 走看看