zoukankan      html  css  js  c++  java
  • css中的关于margin-top,position和z-index的一些bug解决方案

    这两天在写一个demo的时候,就碰到一些css的问题,不知道能不能算bug,很有可能是因为我写的代码太少,孤陋寡闻了_(:зゝ∠)_。记录一下,以防下次遇到同样问题。

    进入正题:

    1、问题描述:div嵌套时内部div设置的margin-top样式会作用到外层div(父元素)上。

    1 <style>
    2 .demo{ margin-top: 10px;}
    3 </style>
    4 
    5 <div>
    6         <div class="demo">demo<div>
    7 <div>

      解决方案:

    (1)、将内部div添加浮动(float: left;)

    (2)、内部div设置padding-top代替margin-top

    2、问题描述:使用position相对定位relative时会导致底部有大片空白

    原理:相对定位占据文档流的,就是说把某东西相对定位了,它原来的位置任然会被占据,就产生了上述问题中描述的空白情况,空白部分就是该元素原来的位置。

    解决方案:将使用相对定位的元素的父元素设置为绝对定位absolute,即可解决问题。

    3、问题描述:z-index改变元素层级无效

    解决办法:将需要改变层级的元素先设置定位为absolute或relative,再设置z-index。

  • 相关阅读:
    HDU1720 A+B Coming
    HDU1390 ZOJ1383 Binary Numbers
    HDU1390 ZOJ1383 Binary Numbers
    HDU2504 又见GCD
    HDU2504 又见GCD
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1020 ZOJ2478 Encoding
    HDU1020 ZOJ2478 Encoding
    HDU2097 Sky数
  • 原文地址:https://www.cnblogs.com/youziclub/p/4643485.html
Copyright © 2011-2022 走看看