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

<!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. HDU——2824 The Euler function

    The Euler function Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  2. ojdbc.jar

    Oracle的jdbc驱动是ojdbc.jar 文件,那么mysql的jdbc驱动是什么呢? 匿名 | 浏览 689 次 发布于2015-06-07 02:06   最佳答案   MySQL的JDBC ...

  3. TI C66x DSP 系统events及其应用 - 5.11（中断控制寄存器）

    C66x DSP运行中断的简要流程: 1.使能了全局中断和子中断.假设硬件检測到中断发生,那么CPU就要跳转. 2.软件把CPU内部的A,B类寄存器的值等推入堆栈保存,把当前PC寄存器的值放入IRP寄 ...

  4. LeetCode 804. Unique Morse Code Words (唯一摩尔斯密码词)

    题目标签:String 题目给了我们 对应每一个 字母的 morse 密码,让我们从words 中 找出 有几个不同的 morse code 组合. 然后只要遍历 words,把每一个word 转换成 ...

  5. 数据挖掘算法学习（八）Adaboost算法

    本文不定期更新.原创文章,转载请附上链接http://blog.csdn.net/iemyxie/article/details/40423907 谢谢 Adaboost是一种迭代算法,其核心思想是针 ...

  6. css高级：flash嵌入

    1,由flash创建的object/embed标签的标准集.缺点:他们与各种无效属性和元素在一起被加载,破坏文档对web标准的依从性, 因为embed是人生w3c规范没有的专有元素. 2,迂回解决方案 ...

  7. Linux下CMake使用介绍

    CMake是一个跨平台的编译自己主动配置工具,它使用一个名为CMakeLists.txt的文件来描写叙述构建过程,能够产生标准的构建文件.它能够用简单的语句来描写叙述全部平台的安装(编译过程).它能够 ...

  8. 金典 SQL笔记 SQL语句汇总

    SELECT * FROM (SELECT ROW_NUMBER() OVER ( ORDER BY id) AS rowN,FNumber, FName,FSalary ,Fage FROM dbo ...

  9. 20170623_oracle_SQL

    ============SQL分类 数据定义语言(DDL):CREATE ALERT DROP TRUNCATE 数据操纵语言(DML):INSERT UPDATE DELETE SELECT 事务控 ...

  10. LeetCode241——Different Ways to Add Parentheses

    Given a string of numbers and operators, return all possible results from computing all the differen ...