层级问题：选中的盒子显示的效果并不完整，右边的边框并没有显示红色，原因是其右边的盒子压了它的边框。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            width:1000px;

            margin:40px auto;

        }

        li{

            list-style:none;

            width:200px;

            height:300px;

            border:1px solid #808080;

            float:left;

            cursor:pointer;

            margin-left:-1px;

        }

        li:hover{

            border:1px solid #ff0000;

        }

    </style>

</head>

<body>

   <ul>

       <li></li>

       <li></li>

       <li></li>

       <li></li>

   </ul>

</body>

</html>

层级大小：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子（高低和占不占位置无关）。

解决办法：1、必须有定位。（除去static之外）。

2、给定z-index的值为层级的值。（不给默认为0）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            width:1000px;

            margin:40px auto;

        }

        li{

            list-style:none;

            width:200px;

            height:300px;

            border:1px solid #808080;

            float:left;

            cursor:pointer;

            margin-left:-1px;

        }

        li:hover{

            border:1px solid #ff0000;

            position:relative;

        }

    </style>

</head>

<body>

   <ul>

       <li></li>

       <li></li>

       <li></li>

       <li></li>

   </ul>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            width:1000px;

            margin:40px auto;

        }

        li{

            list-style:none;

            width:200px;

            height:300px;

            border:1px solid #808080;

            float:left;

            cursor:pointer;

            margin-left:-1px;

            position:relative;

            z-index:1;

        }

        li:hover{

            border:1px solid #ff0000;

            z-index:2;

        }

    </style>

</head>

<body>

   <ul>

       <li></li>

       <li></li>

       <li></li>

       <li></li>

   </ul>

</body>

</html>

注意问题：

1、层级为0的盒子，也比标准流和浮动高。

2、层级为负数的盒子，比标准流和浮动低。

3、层级不取小数）

4、层级一样，后面的盒子比前面的层级高。

5、浮动或者标准流的盒子，后面的盒子比前面的层级高。

6、abselute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。

CSS——层级的更多相关文章

  1. CSS 层级选择器

    CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...

  2. 转载css层级优先级。

    解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...

  3. 前端学习 -- Html&Css -- 层级和透明度

    层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. ...

  4. CSS层级关系 学习笔记

        CSS 文档流   格式化上下文 Formatting Context 即初始元素定义的环境 块格式化上下文  Block Formatting Context BFC 行内格式化上下文   ...

  5. CSS层级关系

    http://www.blogbus.com/eskimo-logs/69626018.htmlhttp://www.dmtuan.com/?p=574

  6. selenium+python自动化之CSS定位

    一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" class ...

  7. 我的CSS架构

    写在前面 都是自己看别人的架构,自己积累下来的一些东西,这里只是阐述自己的一些观念.借此希望同行交流交流下看法,共勉. 不同架构的CSS 业务流程不同,团队配员不同.会有各种各样的CSS架构. 有的会 ...

  8. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  9. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

随机推荐

  1. 【NJU749D】triple（莫比乌斯反演）

    题意: cas<=100 n<=10^5 思路:与两个数的没什么区别 F(d)=(n div d)*(n div d-1)*(n div d-2) div 6 再加上喜闻乐见的下底函数分块 ...

  2. J - Invitation Cards 最短路

    In the age of television, not many people attend theater performances. Antique Comedians of Malidine ...

  3. JAVA和C语言的区别

    java语言和c语言的区别:                                      1 un 公司推出的Java 是面向对象程序设计语言,其适用于Internet 应用的开发,称为 ...

  4. SiteMesh2-sitemesh.xml的ParameterDecoratorMapper映射器的用法

    继续使用上一章http://www.cnblogs.com/EasonJim/p/7086916.html的例子,改造成使用ParameterDecoratorMapper映射器的方法,这个映射器不需 ...

  5. Animations动画和Keyframes关键帧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. redis 主从备份自动切换+java代码实现类

    转载:http://blog.csdn.net/qq_23430789/article/details/52185706 目录(?)[-] redis-0sentinel实例之间的通讯端口 maste ...

  7. JavaScript的原生引用类型

    引用类型是一种数据结构,用于将数据和功能组织在一起,也常称做类.ECMAScript从技术上说是一门面向对象的语言.但它不具备传统的面向对象语言所支持的类和接口等基本结构. Object类型 大多数引 ...

  8. Mongo使用

    在用mongo进行查询时,$exists表示是否document是否包括这个field,即使field的value为null也算是包括. $exists Syntax: { field: { $exi ...

  9. jQuery--编辑表格

    表格操作是我们常常遇到的,还记得刚開始学习牛腩新闻公布系统时.跟着视频进行表格的一些基本操作.而对它的原理与概念全然不懂,不过跟着老师的操作而进行操作. 通过这次学习,对表格的操作有了进一步的了解与掌 ...

  10. expect安装测试-批量用户管理

    安装: yum list | grep expect yum install expect 批量创建用户: ansible mysqldb -m user -a 'name=ansible state ...