zoukankan      html  css  js  c++  java
  • 定位流之z-index属性

    1.固定定位是脱离标准流的,不会占用标准流的空间
    2.和绝对定位有点像,也不区分行内块级元素
    3.类似于前面学的背景关联方式(让某个背景图片不随滚动而滚动)让某个元素不随着滚动条的滚动而滚动
    ie6不支持固定定位


    定义:默认情况所以元素的z-index属性是0;
    作用是专门用于控制定位流元素的覆盖关系的
    默认情况下定位流的元素会盖住标准流的元素
    后面编写的定位流会盖住前面编写的定位流元素
    在企业开发中:可能不止一次用了定位流,而根据定位流的性质,很有可能后面的元素会盖住前面的元素从而影响整个布局,为了解决这个问题,引入了z-index属性,元素z-index属性大的会覆盖属性小的元素
    从父原则:当子元素的父元素有z-index属性时,比较会看父元素的属性而子元素设置的属性就无效了
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位流中的z-index属性</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            div{
                width: 100px;
                height: 100px;
            }
            .box1{
                background-color: yellow;
                position: relative;
                top: 50px;
                left: 50px;
                z-index: 3;
            }
            .box2{
                background-color: red;
                position: absolute;
                top: 100px;
                left: 100px;
                z-index: 1;
            }
            .box3{
                background-color: green;
                position: fixed;
                top: 150px;
                left: 150px;
                z-index: 2;
            }
    
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    </body>
    </html>
  • 相关阅读:
    混合开发的坑(3) ---关于es6
    混合开发的坑(2) ---pdf展示
    混合开发的坑(1) ---ajax请求
    vue.js
    vue中 import引入组件
    vue中 静态文件引用注意事项
    Oracle 数据库链接
    Oracle中的NVL,NVL2,NULLIF以及COALESCE函数使用
    Merge into 使用
    C# —— IList, ArrayList与List的区别详解
  • 原文地址:https://www.cnblogs.com/myErebos/p/8588074.html
Copyright © 2011-2022 走看看