在前端开发中经常会遇到一些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. 锚接口(下)——html5的history api

    概述 虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法,但是很多老式的浏览器并不支持它,所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange ...

  2. spring boot 下 thymeleaf 配置

    1. thymeleaf 配置参数 [参考文章]:spring-boot-starter-thymeleaf 避坑指南 #<!-- 关闭thymeleaf缓存 开发时使用 否则没有实时画面--& ...

  3. 手把手教你如何用eclipse搭建前端开发环境

    3.创建静态web工程 打开eclipse,选择file,new project 或者 new other...,选择web项中的static web project ,next. 输入你的项目名,如 ...

  4. Python - 使用Pyinstaller将Python代码生成可执行文件

    1 - Pyinstaller简介 Home-page: http://www.pyinstaller.org PyInstaller是一个能够在多系统平台(Windows.*NIX.Mac OS)上 ...

  5. Tools - Atom编辑器

    Atom官网 Atom编辑器的常用插件 预览 document-outline:Show a heirarchical outline of a text document minimap:A pre ...

  6. 【2019北京集训2】Elephant 平衡树

    题目大意:给你一个长度为$n$的序列$A_i$,有$q$次操作,每次操作为以下三种之一: 询问区间的$F_M(A_i)$的最大公约数. 区间翻转,区间加一个正数. 我们定义$gcd(0,0)=0$,且 ...

  7. appium-doctor

    1.   I installed appium-1.5.3.dmg But when I click the stethoscope button the Appium is show error : ...

  8. 《Kubernetes权威指南》——组件原理

    1 API Server 1.1 提供集群管理的API接口 API Server在kubernetes中的进程名为apiserver,运行在Master节点上 apiserver开放两个端口 本地端口 ...

  9. 从零开始学 Web 之 ES6（二）ES5的一些扩展

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

  10. MySQL 性能管理及架构设计指南

    一.什么影响了数据库查询速度 1.1 影响数据库查询速度的四个因素 1.2 风险分析 QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定 ...