在前端开发中经常会遇到一些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. pyg 图片服务器中使用的nginx 编译位置

    ./nginx 启动

  2. SharkApktool 源码攻略

    作者:HAI_ 原文来自:https://bbs.ichunqiu.com/thread-43219-1-1.html 0×00 前言 网上的资料对于apktool的源码分析,来来回回就那么几个,而且 ...

  3. typescript handbook 学习笔记1

    概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...

  4. 【金三银四跳槽季】Java工程师如何在1个月内做好面试准备？

    目录 一.写在前面 二.技术广度的快速准备 三.技术深度的快速准备 四.基础功底的快速准备 五.下篇预告 一.写在前面 春节长假转眼已过,即将迎来的是一年一度的金三银四跳槽季. 假如你准备在金三银四跳 ...

  5. canvas与webgl坐标转换

    1 canvas的坐标系 坐标原点在左上角,横轴向右为X轴正方向,竖直向下为Y轴正方向 2 webgl的坐标系 坐标原点在绘图区域的中心点,横向右为X轴正方向,竖直向上为Y轴正方向,横纵坐标区域范围为 ...

  6. docker进阶篇(一) ---- Volume(数据卷)

    引言 docker的镜像是由多个只读的文件系统叠加在一起形成的.当我们在我启动一个容器的时候,docker会加载这些只读层并在这些只读层的上面(栈顶)增加一个读写层.这时如果修改正在运行的容器中已有的 ...

  7. 51Node 1051---最大子矩阵和

    题目链接 一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值.   例如:3*3的矩阵:   -1 3 -1 2 -1 3 -3 1 2   和最大的子矩阵是 ...

  8. C# sqlhelper 2

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  9. vue-03-style与class

    1, 绑定html class 1), 直接绑定 <div> isActive 为true, 则显示 active css <p v-bind:class="{active ...

  10. 团队作业4——beta阶段冲刺

    Deadline: 2018-12-16 22:00PM,以博客提交至班级博客时间为准 提交: (a) 项目课堂演示: (b) 1篇冲刺准备+5篇冲刺随笔,: (c) 1篇用户使用用报告: (d) 1 ...