zoukankan      html  css  js  c++  java
  • CSS:position与zindex

    1. 不使用 position
    这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现.
    2. 使用 absolute
    如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.
    2.1 未使用 z-index
    这种情况下,依据它们在HTML文档中声明的顺序层叠,因为 z-index 在未设置的情况下,默认为 0 .
    <div id = "001" style="top:10; left:30; 100px ;height:50px; border:1px solid #999; background:green; position:absolute;">001</div>
    <div id = "002" style="top:40; left:40; 100px ;height:50px; border:1px solid #999; background:red; position:absolute;">002</div>
    <div id = "003" style="top:80; left:50; 100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;">003</div>
    001:位于最底层
    002:位于中间层
    003:位于最高层
    2.2 使用 z-index
    z-index 为无单位的整数值,可为负数.按照数值的大小排列,数值越大,越在外层.
    <div id = "001" style="top:10; left:30; 100px ;height:50px; border:1px solid #999; background:green; position:absolute ;">001</div>
    <div id = "002" style="top:30; left:40; 100px ;height:50px; border:1px solid #999; background:red; position:absolute;z-index:1;" >002</div>
    <div id = "003" style="top:50; left:20; 100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1;">003</div>
    001:位于中间层
    002:位于最高层
    003:位于最底层
    2.3 父子元素
    对于父子元素,子元素的从属于父元素的层次,子元素在父层的上面
    <div id = "001" style="100px ;height:50px; border:1px solid #999; background:green; position:absolute;z-index:1">001
        <div id = "002" style="top:20; left:40; 100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:-1" >002</div>
    </div>
    <div id = "003" style="top:20; left:40; 100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:0" >003</div>
    001:位于中间层
    002:位于最高层
    003:位于最底层
    3. 混合使用 absolute
    对于没有设置 position:absolute 属性的元素 不管 z-index 设置多少都为 0, 但低于 position:absolute 中 z-index:0 的元素
    <div id = "001" style="top:30; left:30; 100px ;height:50px; border:1px solid #999; background:green; position:absolute;">001</div>
    <div id = "002" style="top:20; left:40; 100px ;height:50px; border:1px solid #999; background:red;z-index:1" >002</div>
    <div id = "003" style="top:20; left:40; 100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1" >003</div>
    001:位于最高层
    002:位于中间层
    003:位于最底层

    作者:行走的贝壳

    来源贝壳笔记 (http://ronli.cnblogs.com)

  • 相关阅读:
    redis 中 set 和 hset 有什么不同,什么时候使用 hset 什么时候使用set?
    redis的底层数据结构
    python开发-实现redis中的发布订阅功能
    使用redis-py的两个类Redis和StrictRedis时遇到的坑
    python使用redis实现协同控制的分布式锁
    深入理解 Python 异步编程(上)
    linux中read,write和recv,send的区别
    socket常见问题
    python socket 编程之三:长连接、短连接以及心跳
    Flask快速入门
  • 原文地址:https://www.cnblogs.com/ronli/p/2119343.html
Copyright © 2011-2022 走看看