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。

  • 相关阅读:
    更好的处理 Python 多工程 import 依赖
    Django 前后台的数据传递
    Django传递数据给JS
    nodejs 设置跨域访问
    Node.js + Express
    前端用户输入校验--基于JQ
    git统计当前分支提交次数
    gitlab相关
    CentOS7使用firewalld打开关闭防火墙与端口
    puppeteer安装/爬取数据
  • 原文地址:https://www.cnblogs.com/youziclub/p/4643485.html
Copyright © 2011-2022 走看看