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

<!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. Code(poj 17801)

    求出一个长度为10^n+n-1的序列,其中包含了所有的n位数(一共10^n个数,从00000(n个0)~10^n-1) /* 典型的欧拉回路题目 对于n=4为密码想要序列最短 那么 1234 234? ...

  2. [bzoj1878][SDOI2009]HH的项链_莫队

    HH 的项链 bzoj-1878 SDOI-2009 题目大意:给定一个n个数的序列.m次询问,每次询问一段区间内数的种类数. 注释:$1\le n\le 5\cdot 10^4$,$1\le m\l ...

  3. Ubuntu 16.04安装WPS

    1.下载 http://community.wps.cn/download/ 根据需要对应版本进行下载deb包. 2.安装 sudo dpkg -i wps-office_10.1.0.5672~a2 ...

  4. Vue插槽的另外一些特性

    之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...

  5. MySQL: 改变Homebrew安装MySQL/MariaDB的数据库文件目录

    1. brew install mariadb 2. mysql_install_db --verbose --user=$USER --basedir=/usr/local/Cellar/maria ...

  6. 万能存储工具类SDCard存储 /data/data/存储 assets存储 raw存储

    万能存储工具类 SDCard存储  /data/data/存储  assets存储 raw存储 粘贴过去就能够用了 <uses-permission android:name="and ...

  7. 从头认识java-15.1 填充容器（1）-利用Collection构造器的方式

    这一章节我们来介绍一下填充容器. 就像数组一样,Arrays.fill是填充方法,在容器里面也有. 1.Collections.nCopies 这种方法是生成某种类型多少个对象,然后我们能够把他放到容 ...

  8. (转)C++ CListCtrl使用技巧的摘抄

    转:http://blog.csdn.net/sanshao27/article/details/1888315 1. CListCtrl 风格 LVS_ICON: 为每个item显示大图标      ...

  9. 你有必要知道的 25 个 JavaScript 面试题

    1.使用 typeof bar === "object" 推断 bar 是不是一个对象有神马潜在的弊端?怎样避免这样的弊端? 使用 typeof 的弊端是显而易见的(这样的弊端同使 ...

  10. hdu3488Tour KM算法

    //给一个有向图, //找出若干环,使得这些环覆盖全部点且每一个点仅仅能在一个环中 //问所得的全部环的全部边权值之和的最小值为多少 //对于每一个点仅仅有一个入度和一个出度.那么将每一个点拆成 // ...