在前端开发中经常会遇到一些CSS代码设置无效的情况，下面我总结一些我遇到的情况。

1.height：100%无效

百分比的高度在设定时需要根据这个元素的父元素容器的高度。例如一个div的高度设为40%，而父元素的高度为100px时，那么这个div的高度应为40px。

在默认情况下<html></html><body></body>的高度都是0，而两个元素又是其他元素的父元素，所以height：100%当然也是0。解决方法是在html，body的CSS中都加上height:100%。

2.z-index无效

z-index在使用时有一个前提，只能在position是relative，absolute，fixed才有效。在满足这个条件后还需注意dome节点关系，z-index值只决定同一父元素中的同级子元素的堆叠顺序。堆叠顺序不是看子元素的z-index而是看父元素的z-index。

3.position:fixed无效

fixed定位的元素，如果父元素有transform属性，那么fixed无效，原因尚不清楚。设置fixed的元素其父元素不要设置transform属性，记住这个情况就行。

常见的CSS代码无效问题的更多相关文章

  1. 常用CSS代码片段常见css bug

    1.禁止文字被选中 .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select ...

  2. CSS——插入形式 基本格式 常见css代码

    常见css代码 无下划线链接 字体颜色   +   左边距 背景颜色 字体.字体颜色.大小 文本对齐方式[取代了<center>]

  3. Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  4. 精简CSS代码，提高代码的可读性和加载速度

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  5. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  6. 20个编写现代 CSS 代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  7. 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...

  8. 20个编写现代CSS代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  9. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

随机推荐

  1. GitHub(从安装到使用)

    一.安装Git for Windows(又名msysgit)  下载地址: https://git-for-windows.github.io/  在官方下载完后,安装到Windows Explore ...

  2. 下载 rpm 源码包并重新编译

    $ yumdownloader --source gdb $ rpmbuild --rebuild gdb-7.8.1-30.fc21.src.rpm $ cd ~/rpmbuild/SPECS/ $ ...

  3. cannot download, /home/azhukov/go is a GOROOT, not a GOPATH

    问题详情: go环境安装好后,运行go代码也没有问题 下载govendor包的时候提示: cannot download, /home/azhukov/go is a GOROOT, not a GO ...

  4. Ubantu常用命令

    Ubantu常用命令 ctrl alt t   :打开终端 ctrl d : 关闭终端 F11   : 终端全屏,再按一次退出全屏 Super(即win)                        ...

  5. s3 api接口的调用

    最近公司使用s3做文件存储服务器,因此在程序中需要调用s3的api,目前程序中使用了python和java版本的s3的api,简单做下记录,方便以后使用. 一.s3 api使用python版 1.安装 ...

  6. kafka的迁移干货

    随着业务的发展, 服务器所在网段/机群不允许kafka继续保留在那, 需要移动到先机器上. 哎呀上面是废话,总的说就是: 2台老kafka不要了,数据要迁移到新的2台kafka上面.要求数据不丢失 通 ...

  7. 从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（二十四）：权限控制（Shiro 注解）

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 当前,我们基于导航菜单的显示和操作按钮的禁用状态,实现了页面可见性和 ...

  9. MySQL修改表、字段、库的字符集及字符集说明

    修改数据库字符集: ALTER DATABASE db_name DEFAULT CHARACTER SET character_name [COLLATE ...]; 把表默认的字符集和所有字符列( ...

  10. 区块链 + 大数据：EOS存储

    谈到区块链的存储,我们很容易联想到它的链式存储结构,然而区块链从比特币发展到今日当红的EOS,技术形态已经演化了10年之久.目前的EOS的存储除了确认结构的链式存储以外,在状态存储方面有了很大的进步, ...