CSS——层级
层级问题：选中的盒子显示的效果并不完整，右边的边框并没有显示红色，原因是其右边的盒子压了它的边框。
<!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——层级的更多相关文章
- CSS 层级选择器
CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...
- 转载css层级优先级。
解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...
- 前端学习 -- Html&Css -- 层级和透明度
层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. ...
- CSS层级关系 学习笔记
CSS 文档流 格式化上下文 Formatting Context 即初始元素定义的环境 块格式化上下文 Block Formatting Context BFC 行内格式化上下文 ...
- CSS层级关系
http://www.blogbus.com/eskimo-logs/69626018.htmlhttp://www.dmtuan.com/?p=574
- selenium+python自动化之CSS定位
一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" class ...
- 我的CSS架构
写在前面 都是自己看别人的架构,自己积累下来的一些东西,这里只是阐述自己的一些观念.借此希望同行交流交流下看法,共勉. 不同架构的CSS 业务流程不同,团队配员不同.会有各种各样的CSS架构. 有的会 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
随机推荐
- Sql语句中关于如何在like '%?%'中给？赋值
做模糊查询用户的时候,如果 String sql="select * from users where name like %?%"; String[] param={userna ...
- [bzoj 1047][HAOI2007]理想正方形（单调队列）
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1047 分析: 第一感觉二维线段树当然没问题但是挺慢的. 注意到要求的正方形形中的最大最小边长是 ...
- BZOJ(3) 1051: [HAOI2006]受欢迎的牛
1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 7365 Solved: 3937[Submit][Sta ...
- eclipse下载egit插件，实现代码git同步问题
1.使用egit后,怎样查看历史log信息? : Team -> Show in history可以查看版本历史提交记录 2.每次代码提交前,先fetch,再merge. 先fetch获得最新代 ...
- 使用jcaptcha插件生成验证码
1.从官网http://jcaptcha.sourceforge.net/下载插件.将对应jar包导入到lib文件夹下 2.创建一个CaptchaServiceSingleton类用来获取jcaptc ...
- cordova windows环境配置
* 安装Cordova 1.cordova是利用nodeJS进行管理,所以要先下载nodeJS. 2. 打开命令窗口,输入:“npm install -g cordova”即可安装 3. 安装后,输入 ...
- Lua 跟 C++ 的交互
Lua 和 C++ 是这样交互的 乱七八糟的前戏: 1. 到官网下载 Lua 文件 可參考 -> Lua 下载与配置 2. 设置环境 可參考 -> VS 配置Lua环境 交互过程 ...
- LeetCode 451. Sort Characters By Frequency （根据字符出现频率排序）
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...
- [DB][MySql]关于取得自增字段的值、及@@IDENTITY 与并发性问题
对于刚从Oracle转向MySql的人都会为,MySql中没有Oracle里的Sequence而感到困惑.MySql中没有了Sequence,那么MySql的主键用什么方式来实现最好呢? 主要有下面几 ...
- TTS-零基础入门-10分钟教你做一个语音功能
在本片博客正式開始之前,大家先跟我做一个简单的好玩的 小语音. 新建一个文本文档,然后再文档里输入这样 一句话 CreateObject("SAPI.SpVoice").Spea ...