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

<!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. [洛谷P1114] “非常男女”计划

    题目描述 近来,初一年的XXX小朋友致力于研究班上同学的配对问题(别想太多,仅是舞伴),通过各种推理和实验,他掌握了大量的实战经验.例如,据他观察,身高相近的人似乎比较合得来. 万圣节来临之际,XXX ...

  2. ExtJs--13-- Ext.apply(src,apply) 和 Ext.applyIf(src,apply) 两个方法的使用和差别比較

    Ext.onReady(function(){ /* * Ext.apply(src,apply) 和 Ext.applyIf(src,apply) 两个方法的使用和差别比較 */ //Ext.app ...

  3. JAVA 网络长短连接

       作为java的刚開始学习的人,看了网上的资料后,关于java的长短连接,感觉理解的不是非常深刻.结合自己的学习和网上的资料整理例如以下.不对之处请大家批评指正.                  ...

  4. 转 java中5种创建对象的方法

    作为Java开发者,我们每天创建很多对象,但我们通常使用依赖管理系统,比如spring去创建对象.然而这里有很多创建对象的方法,我们会在这篇文章中学到. Java中有5种创建对象的方式,下面给出它们的 ...

  5. error: &#39;for&#39; loop initial declarations are only allowed in C99 mode

    error: 'for' loop initial declarations are only allowed in C99 mode 使用gcc编译代码是报出 error: 'for' loop i ...

  6. iOS_截屏并裁剪

    截图使用场景: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fil ...

  7. java反射中getDeclaredMethods和getMethods的区别

    getDeclaredMethods()          返回 Method 对象的一个数组,这些对象反映此 Class 对象表示的类或接口声明的所有方法,包括公共.保护.默认(包)访问和私有方法, ...

  8. [JSOI 2010] 满汉全席

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1823 [算法] 2-SAT [代码] #include<bits/stdc++ ...

  9. CF19 E Fairy——树上差分

    题目:http://codeforces.com/contest/19/problem/E 先把图连成一棵树,然后对于每条非树边,判断它是在奇环中还是偶环中: 把环上的点打上相应的差分标记,并记录有多 ...

  10. bzoj1061&&bzoj3256

    http://www.lydsy.com/JudgeOnline/problem.php?id=1061 单纯形... 先开始我不知道对偶,看着代码不知所措,并不能懂他们写的是什么... 单纯形的标准 ...