zoukankan      html  css  js  c++  java
  • 普通元素的层次问题

    对定位元素使用z-index属性可以直接对元素设置层次,它会在渲染时影响元素的遮盖顺序。但z-index属性仅对定位元素生效,那么对于非定位元素呢?实际上在非定位元素之间也有自己的层次设置方案,一些普通的属性就可以影响非定位元素的遮盖顺序。
      通常,在文档中位置较后的元素会挡住较前的元素。
    运行<style>
    div {width:16px;height:16px;margin-right:-10px;margin-bottom:-10px;}
    </style>
    <div style="background:red;"></div>
    <div style="background:green;"></div>
    <div style="background:blue;"></div>

      但块级元素无法挡住浮动的元素,而浮动的元素又无法挡住行级元素。
    运行<style>
    div {width:16px;height:16px;margin-right:-10px;margin-bottom:-10px;}
    </style>
    <div style="background:red;display:inline-block;"></div>
    <div style="background:green;float:left;"></div>
    <div style="background:blue;"></div>

      也就是说,非定位元素的层次关系是:块级元素 < 浮动元素 < 行级元素
      另外,对于定位元素的层次,要看z-index的设置。如果z-index不为负则比非定位元素的层次高(会挡住非定位元素),如果为负则层次低(会被挡住)。运行<style>
    div {width:16px;height:16px;margin-right:-10px;margin-bottom:-10px;}
    </style>
    <div style="background:red;display:inline-block;"></div>
    <div style="background:green;float:left;"></div>
    <div style="background:blue;"></div>
    <div style="background:yellow;position:relative;z-index:-1;"></div>
    <div style="
      background:cyan;left:10px;top:-10px;
      position:relative;
      /*默认z-index为auto,与父元素相等(等于0,是非负数)*/
    "></div>

  • 相关阅读:
    MySql 用户 及权限操作
    MAC 重置MySQL root 密码
    在mac系统安装Apache Tomcat的详细步骤[转]
    Maven:mirror和repository 区别
    ES6 入门系列
    转场动画CALayer (Transition)
    OC 异常处理
    Foundation 框架
    Enum枚举
    Invalid App Store Icon. The App Store Icon in the asset catalog in 'xxx.app' can’t be transparent nor contain an alpha channel.
  • 原文地址:https://www.cnblogs.com/axl234/p/3897226.html
Copyright © 2011-2022 走看看