zoukankan      html  css  js  c++  java
  • css relative

    一、relative和absolute相煎关系
    relative限制absolute
    1、限制left/top/right/bottom定位
      如果父元素有relative,只能根据父元素进行定位
    2、限制z-index层级
      如果relative有z-index,absolute的z-index失效
    3、限制在overflow下的嚣张气焰
      overflow:hidden是防止不了absolute的溢出的。但是配合relative的overflow是可以防止溢出的
    relative限制fixed: 只能限制z-index层级
    二、relative和定位
    两个特性
    1、相对自身
    left:0,top:0相对自身。其实就是纹丝不动。
    relative配合margin定位
    <style>
      div{
        width: 300px;
        height: 50px;
        background: #eee;
        margin-top:20px;
      }
    </style>
    <body>
      <div></div>
      <div style="position:relative; margin-top:-30px; background: red;"></div>
      <div></div>
    </body>
    后面的元素会跟上去,若不是margin-top,而是top
    <style>
      div{
        width: 300px;
        height: 50px;
        background: #eee;
        margin-top:20px;
      }
    </style>
    <body>
      <div></div>
      <div style="position:relative; top:-30px; background: red;"></div>
      <div></div>
    </body>
    第三个元素纹丝不动。
    2、无侵入
    不会影响其他布局,自己怎么定,其它元素纹丝不动
    应用:自定义拖拽
    3、top/bottom和left/right对立属性同时存在时的表现是?
    绝对定位是拉伸,相对定位是斗争。怎么斗争。如果先设置了top,bottom无效。如果先设置了left,right无效
    <style>
      div{
        width: 300px;
        height: 50px;
        background: #eee;
        margin-top:20px;
      }
    </style>
    <body>
      <div></div>
      <div style="position:relative; top:-30px; bottom:30px; background: red;"></div>
      <div></div>
    </body>
    执行的是top:-30px。先设置者优先,而不是覆盖。
    三、relative和层级
    1、提高层迭上下文
      在没有其它外力作用下,一般都是后面的元素覆盖前面的。但是想前面的上前。前面的配合z-index就能起作用。单独的z-index是无效的
    2、新建层叠上下文与层级控制
      relative+z-index:auto,不会限制absolute,默认是auto的(不包括ie6,7)
    四、relative的最小化影响准则
    尽量降低relative属性对其他元素或布局的潜在影响!
    1、在可以单独使用absolute解决问题的时候,不要使用relative,如有偏差,可以配合margin使用
    2、一定要使用relative的时候,要保证作用范围最小化
  • 相关阅读:
    BZOJ4779: [Usaco2017 Open]Bovine Genomics
    USACO比赛题泛刷
    BZOJ1977: [BeiJing2010组队]次小生成树 Tree
    LOJ #10132. 「一本通 4.4 例 3」异象石
    $O(n+log(mod))$求乘法逆元的方法
    BZOJ2226: [Spoj 5971] LCMSum
    数据库 | Redis 缓存雪崩解决方案
    中间件 | 微服务架构
    数据库 | SQL 诊断优化套路包,套路用的对,速度升百倍
    数据库 | SQL语法优化方法及实例详解
  • 原文地址:https://www.cnblogs.com/wzndkj/p/10475258.html
Copyright © 2011-2022 走看看