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

<!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. T1002 搭桥 codevs

    http://codevs.cn/problem/1002/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 有一矩形区域的城 ...

  2. 工作流框架Activiti

    最近在看一些项目设计方面的文章,涉及到了工作流技术,于是了解一下. 1.概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照 ...

  3. 四则运算结对编程（GUI）

    四则运算GUI coding地址:https://git.dev.tencent.com/qyj814/GUI.git 结对伙伴:李梦宇 一.题目要求 定制出题要求.每次出题时用户都可以在界面上定制如 ...

  4. update city_demo set city=(select city from city order by rand() limit1);

    update city_demo set city=(select city from city order by rand() limit1); 因为使用了rand()函数,所以每一次查询的结果是不 ...

  5. Java Map 怎样实现Key 的唯一性？

    大家都知道.在Map和Set不可存在反复元素? 可是对于内部的细节我们并不了解.今天我们就一块来 探讨一下! 1 对于 HashMap  HashSet 他们的底层数据结构的实现是:维护了一张  Ha ...

  6. ARP病毒查找与防范

    笔者是一名大学生,学的是网络project. 自然接触的网络就多了.当然免不了做些坏事,嘿嘿. 比如我经经常使用在网上学习的知识去測验一下我自己的电脑或者同学啥的,都是一些小打小闹. 无伤大雅,知道有 ...

  7. 使用JavaScript开发IE浏览器本地插件实例

    使用JavaScript开发IE浏览器本地插件实例 投稿:junjie 字体:[增加 减小] 类型:转载 时间:2015-02-18我要评论 这篇文章主要介绍了使用JavaScript开发IE浏览器本 ...

  8. 为什么使用 use strict

    进入标志: "use script"; 使用方式: 可以在 js 代码的第一行,也可以使用在函数中.但是写在 js 代码第一行不利于文件合并,因此可以写在一个自调用函数的第一行 使 ...

  9. HDOJ 题目2475 Box（link cut tree去点找祖先）

    Box Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  10. 浅析Linux字符设备驱动程序内核机制

    前段时间在学习linux设备驱动的时候,看了陈学松著的<深入Linux设备驱动程序内核机制>一书. 说实话.这是一本非常好的书,作者不但给出了在设备驱动程序开发过程中的所须要的知识点(如对 ...