美文网首页
CSS之基础知识开篇(四)

CSS之基础知识开篇(四)

作者: 莫失丿莫忘 | 来源:发表于2017-06-22 15:39 被阅读12次

1.Z-index 层级

只有 定位的盒子 (除了static) 才有 z-index
如果都是定位 绝对定位 他们默认的z-index 是 0
最后的一个 靠上。
定位的盒子层级高于标准流(static)的盒子。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       /* .test {
            width: 150px;
            height: 300px;
            border: 1px solid #ccc;
            margin-top: 100px;
            float: left;
            margin-left: -1px;
        }
        .test:hover {
            border: 1px solid #f40;
            position: relative;
        } */
        .test {
            width: 150px;
            height: 300px;
            border: 1px solid #ccc;
            margin-top: 100px;
            float: left;
            margin-left: -1px;
            position: relative;
        }
        .test:hover {
            border: 1px solid #f40;
            z-index: 1;

        }
    </style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>

效果图:

Paste_Image.png

相关文章

  • CSS之基础知识开篇(四)

    1.Z-index 层级 只有 定位的盒子 (除了static) 才有 z-index如果都是定位 绝对定位 ...

  • CSS之基础知识开篇(三)

    1.浮动产生负作用 背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或...

  • CSS之基础知识开篇(五)

    1.鼠标样式 Cursor: pointer 鼠标变成小手Cursor: default; 默认光标:小白...

  • CSS之基础知识开篇(一)

    1. CSS的组成 css 样式由选择符和声明组成,而声明又由属性和值组成。 1.1 选择符(选择器)选择符:又称...

  • CSS之基础知识开篇(二)

    1.CSS盒模型 盒子模型有两种,分别是标准盒子模型和IE盒子模型。 CSS 把盒模型分为两种基本形态:Block...

  • 好程序员web前端培训之CSS基础知识之position

    好程序员web前端培训之CSS基础知识之position CSS定位机制 标准文档流(Normal flow) 浮...

  • CSS样式表继承详解

    最近在恶补css样式表的基础知识。上次研究了css样式表之冲突问题详解。这次是对css继承特性的学习。 什么是cs...

  • CSS相关汇总

    CSS命名规范 CSS基础知识 CSS优化技巧 CSS的继承关系 CSS的选择器关系介绍

  • css基础知识四

    text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align:c...

  • CSS基础知识四

    知识点导航: 行高和字号

    行高

    在 CSS 中,所有的行都有行高。盒模型的 padding 不是作用在...

网友评论

      本文标题:CSS之基础知识开篇(四)

      本文链接:https://www.haomeiwen.com/subject/grefcxtx.html