css中的关于margin-top,position和z-index的一些bug解决方案
2015-07-13 17:39
477 查看
这两天在写一个demo的时候,就碰到一些css的问题,不知道能不能算bug,很有可能是因为我写的代码太少,孤陋寡闻了_(:зゝ∠)_。记录一下,以防下次遇到同样问题。
进入正题:
1、问题描述:div嵌套时内部div设置的margin-top样式会作用到外层div(父元素)上。
解决方案:
(1)、将内部div添加浮动(float: left;)
(2)、内部div设置padding-top代替margin-top
2、问题描述:使用position相对定位relative时会导致底部有大片空白
原理:相对定位占据文档流的,就是说把某东西相对定位了,它原来的位置任然会被占据,就产生了上述问题中描述的空白情况,空白部分就是该元素原来的位置。
解决方案:将使用相对定位的元素的父元素设置为绝对定位absolute,即可解决问题。
3、问题描述:z-index改变元素层级无效
解决办法:将需要改变层级的元素先设置定位为absolute或relative,再设置z-index。
进入正题:
1、问题描述:div嵌套时内部div设置的margin-top样式会作用到外层div(父元素)上。
<style> .demo{ margin-top: 10px;} </style> <div> <div class="demo">demo<div> <div>
解决方案:
(1)、将内部div添加浮动(float: left;)
(2)、内部div设置padding-top代替margin-top
2、问题描述:使用position相对定位relative时会导致底部有大片空白
原理:相对定位占据文档流的,就是说把某东西相对定位了,它原来的位置任然会被占据,就产生了上述问题中描述的空白情况,空白部分就是该元素原来的位置。
解决方案:将使用相对定位的元素的父元素设置为绝对定位absolute,即可解决问题。
3、问题描述:z-index改变元素层级无效
解决办法:将需要改变层级的元素先设置定位为absolute或relative,再设置z-index。
相关文章推荐
- css的文本样式属性
- 如何用css3做全屏切换效果
- div+css进度条
- CSS的布局属性
- css3动画效果
- css hack
- 不解释,分享这个base.css
- 解决grunt-contrib-cssmin压缩默认会删除一些css hack的问题
- CSS的盒模型属性总结
- CSS3动画遮罩文字特效
- css3 边框记
- 目前比较全的CSS重设(reset)方法总结
- css函数
- iOS Web开发激活css
- 【css】 收藏 纯css打造 mackbook air
- HTML+CSS 实现水流流动效果
- HTML+CSS3 纯代码实现转盘效果
- css3 text-shadow
- 常见浏览器兼容性问题与解决方案css篇
- 简单CSS3动画