关于定位中left和right，top和bottom的权重问题

　　在共同类中设置了定位并且设置了left等定位，如果你引用这个类并加入其他的类中也有left和right等定位，那么你设置的right或是bottom将会无效。

　　原因：因为在定位中，left比right的权重高，top比bottom权重高，所以才无效果

　　解决办法：在共同的类中把left设置为：left：auto或者是把left属性删除，各自的类设置并无互相影响；

　　案例分析：

　　在轮播图中，给两个盒子向前向后按钮同时添加一个共同的定位left值，然后再把两个盒子用right分开时，没有效果，还是重叠在一起。

　　html代码

　　有问题的css代码

　　公共类属性设置

　　各自类设置

关于定位中left和right，top和bottom的权重问题的更多相关文章

  1. css 样式中 margin padding和top类定位的区别

    1 margin margin 是外边距的意思,是边框到外部另一元素之间的距离,允许使用负值 语法结构: margin:5px auto;                  意思上下为5,左右平均居中 ...

  2. 深入理解CSS定位中的偏移

    × 目录 [1]定位 [2]包含块 [3]偏移属性[4]绝对定位[5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位 ...

  3. 【转】深入理解CSS定位中的偏移

    前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...

  4. CSS定位中“父相子绝”

    一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

  5. css定位中的百分比

    ----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...

  6. js代码中的parent，top和self有什么区别

    .parent常用在iframe和frame中的子页面访问父页面中的对象 .top :一个页面可能会有很多层,top是指最顶层的框架 .self :是指当前窗口

  7. Sql语句中使用参数化的Top

    在sql中使用参数化的Top,Top后面的参数要用括号括起来. 例如: select top (@ts) ID, [Type], Title, Content, LinkMan, Tel, Check ...

  8. Linux中系统检测工具top命令

    Linux中系统检测工具top命令 本文转自:https://www.cnblogs.com/zhoug2020/p/6336453.html 首先介绍top中一些字段的含义: VIRT:virtua ...

  9. Linux课程---12、linux中内存指令（top命令的作用是什么）

    Linux课程---12.linux中内存指令(top命令的作用是什么) 一.总结 一句话总结: top实时观察进程.内存和CPU情况 1.电脑出现反应慢情况,最先想到的是什么? 内存 2.linux ...

随机推荐

  1. 传智播客ADO.Net项目开发教程具体解释

    内容简单介绍: 本教程为传智播客.Net培训课堂的现场录像,请到140623ls" target="_blank">传智播客.Net学院下载很多其它免费.Net视频 ...

  2. Kinect驱动的人脸实时动画

    近期几年.realtime的人脸动画開始风声水起.不少图形图像的研究者開始在这个领域不断的在顶级会议siggraph和期刊tog上面发文章. 随着kinect等便宜的三维数据採集设备的运用.以及其功能 ...

  3. Windows 环境下运用Python制作网络爬虫

    import webbrowser as web import time import os i = 0 MAXNUM = 1 while i <= MAXNUM: web.open_new_t ...

  4. C语言中结构体变量之间赋值

    近期,我阅读了某新员工小刘写的C语言代码,发现其对结构体变量之间的赋值不是非常熟悉. 对于两个同样类型的结构体变量,他均採用的是逐个成员变量直接赋值的形式.例如以下的代码演示样例: 如上代码所看到的, ...

  5. 使用heartbeat+monit实现主备双热备份系统

    一.使用背景 项目须要实现主备双热自己主动切换的功能,保证系统7*24小时不间断执行.现已有两台双网卡的IBM的server,为了不再添加成本採购独立外部存储设备和双机热备软件.採用了linux下开源 ...

  6. windows7 配置 python开发环境

    1.安装python2.7     官网下载,安装,配置环境变量 path,命令行 执行python 2.easy_install 安装 win7 64位必须使用ez_setup.py进行安装. 方法 ...

  7. 【WinHec启发录】透过Windows 10技术布局，谈微软王者归来

    每一个时代都有王者,王者的成功,往往是由于恰逢其时地公布了一个成功的产品(具有里程碑意义,划时代的产品).Windows 95的成功标示着微软是PC时代的王者:WinXP的成功标示着微软是互联网时代的 ...

  8. ubuntu双网卡绑定配置

    1,安装bonding需要的软件 sudo apt-get install ifenslave 2,在/etc/modules中加入: bonding mode= miimon= 3,在/etc/ne ...

  9. 2016/2/24 . html . htm . shtml 的区别

    htm.html.shtml网页区别     htm.html.shtml区别 接下来我们来了解下htm.shtml.html这三者之间区别.首先htm.html.shtml都是静态网页的后缀,三者也 ...

  10. go 安装方法

    wget https://storage.googleapis.com/golang/go1.5.linux-amd64.tar.gz sudo tar -C /usr/local -xzf go1. ...