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

最新推荐文章于 2022-12-13 23:05:11 发布
转载 最新推荐文章于 2022-12-13 23:05:11 发布 · 553 阅读 · 2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/bayi/p/8268896.html
文章标签：

#php

本文解析了CSS中left/right及top/bottom属性的权重问题。当共同类与特定类发生冲突时，left通常会覆盖right，top也会覆盖bottom。文章通过案例说明如何避免此类问题，并提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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

　　案例分析：

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

　　html代码

　　有问题的css代码

　　公共类属性设置

　　各自类设置

转载于:https://www.cnblogs.com/bayi/p/8268896.html

【图像超分】论文复现：Pytorch实现RDN！保姆级复现教程！实现与原论文基本一致的PSNR和SSIM！代码注释详尽！易读易复用！可用于训练自己的数据集！附完整代码和各放大倍数下的最优模型权重文件！
主要更新底层视觉（去噪、超分等）相关的科研内容，形式为【论文精读】+【论文复现】
04-29 2981
论文题目：Residual Dense Network for Image Super-Resolution —— 用于图像超分辨率的残差密集网络【图像超分】论文精读：Residual Dense Network for Image Super-Resolution（RDN）请配合上述论文精读文章使用，效果更佳！虽然论文中为了丰富内容用了很多缩写，并且写的很详细。这对于论文复现者来说是很友好的，尤其是网络结构的实现上，非常清晰。
使用 Mask RCNN 进行基于深度学习的对象检测和分割
最新发布
Mr数据杨
11-24 1295
结合现代深度学习技术和传统的计算机视觉方法，能够在复杂的真实世界场景中实现高效准确的对象检测和实例分割。这不仅为研究人员和工程师提供了强大的工具，也为广泛的应用领域开辟了新的可能性。随着技术的不断进步，我们期待在未来看到更多创新和应用的出现。
left、right、top和bottom的权重问题
g_hold的博客
07-02 758
权重问题left比right，权重高。有left又有right的时候，执行left的值。top比bottom，权重高。有top又有bottom的时候，执行top的值。
left top right bottom问题
weixin_34088598的博客
03-24 284
left，top，right，bottom的优先级问题 一个div的样式如下 <div style="height: 200px;width:200px; position: absolute;top: 100px;left: 100px;background-color:green;"> 这里我要测试left，top，right，bottom的问题 </di...
CSS的定位和权重
weixin_57727027的博客
03-05 625
CSS定位 主要用来规定元素的定位类型。 说明：这个属性定义建立元素布局所用的定位机制。 任何元素都可以定位，不过绝对定位或固定元素会生成一个块级框，而不论该元素本身是什么类型。 相对定位元素会相对于它在正常流中的默认位置偏移。 通过设置top bottom left right 四个属性值来决定偏移位置。值可以为关键词、百分比、绝对单位 值 描述 Static 默认值，没有定位。元素出现在正常的流中。（忽略top、right、bottom、left和z-index属性） relative
DIV CSS left right top bottom定位
sinolzeng的专栏
11-15 1941
这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative此取值方可生效。
matlab里面的命令lefttop,总结css中常见的四个定位属性（left right top bottom）
weixin_29831325的博客
03-18 1140
DIV CSS left right top bottom定位这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative。Left 当前元素的左侧与父元素左侧(就是原来默认位置)的距离值。Right 当前元素的右侧与父元素右侧的距离值。Top 当前对象顶部距离原位置顶部距离多少。Bottom 当前对象底部距离原位置距离多少...
CVPR 2018 Bottom-Up and Top-Down Attention for Image Captioning and Visual Question Answering
leeyns的博客
12-13 590
CVPR 2018 Bottom-Up and Top-Down Attention for Image Captioning and Visual Question Answering
PyAutoGUI图像定位实践：如何处理颜色变化和光照问题
[PyAutoGUI图像定位实践：如何处理颜色变化和光照问题](https://cdn.educba.com/academy/wp-content/uploads/2021/02/OpenCV-HSV-range.jpg) # 1. PyAutoGUI库概述及其图像定位原理 PyAutoGUI是一个用于GUI自动化的...
VC中基于CEditView的打印和打印预览设计
12-13
### VC中基于CEditView的打印和打印预览设计 #### 一、CEditView程序框架的功能特点 在Microsoft Visual C++（以下简称VC）中利用MFC（Microsoft Foundation Classes）框架进行开发时，通过选择CEditView作为视图...
css属性left、right、top、bottom
oatmeal2015的博客
09-13 8218
css：left属性 浏览器支持 所有主流浏览器都支持 left 属性。 定义和用法 left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 注释：如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。 说明 对于 static 元素，为 auto；对于
每天CSS学习之top/left/right/bottom
dietisi8980的博客
08-11 486
top：值域是数值或百分比，正负都可以。该值表示 距离顶部有多少像素。例如top:10px；即距离顶部10个像素。 left/right/bottom与top如出一辙，只是方向不一样而已。 这些属性一般配合position一起使用。只有当position的值为relative、absolute或fixed时才有效。 注意：position为relative时，标签是基于文档流的；当...
【BUG日记】【CSS】top和bottom、left和right同时存在的时候，left、top优先级最高（无论class、style、import）
南方者的博客
03-23 794
【日期】 2022/3/18 【问题】 今天在实现项目功能的时候，发现top和bottom如果同时存在，不管top和bottom位置放在哪里的样式，top一直都比bottom的优先级高，left和right同时存在的时候也是一样，left一直会比right的优先级高。然后就导致功能失效。「存在问题Demo的展示」 「需要做到Demo的展示」 【原因】 top和bottom、left和right同时存在的时候，left、top优先级最高（无论class、style、!import） 【如何发现】 想要完善
定位属性left，right，top，bottom
weixin_30650859的博客
07-01 1075
1.官方解释 left： 设置定位元素左外边距边界与其包含块左边界之间的偏移。（该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移，下面也差不多。。） right： 设置定位元素右外边距边界与其包含块右边界之间的偏移。 top： 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 bottom： 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2.个人理解 ...
View 的 translationX、 translationY ， X、Y 和 Left、Top，Right、Bottom之间的关系
qijingwang的博客
05-08 3394
网上有不少人把view的坐标和点击事件的坐标 混为一谈 一、View的相关坐标和位置 先来看一张图，对这几个值有个大概了解，下面再进行详细的分析 先来了解一个概念： view动画不改变view的真实位置，就是肉眼看上去，view位置发生了变化，但是它的点击区域还是在原来的位置。 属性动画和setTranslationX/setTranslationY ，会改变显示位置和真实位置 上图...
top与bottom、left与right的优先级
Jq的博客
08-31 5067
同时使用top和bottom，效果如何呢？ 如果给一个设置高度的元素设置绝对定位的元素中top和bottom，top优先，而且bottom加 !important也“敌不过”top。 可以理解成：浏览器解释代码的时候发现top和bottom同时存在，就放弃解释bottom，那么bottom的属性值也就不会被解释，就是说！important没上场与其作战）。同理，left和right，是left...
面试总结（4）：top、left、right、bottom 和 translationX、translationY 和 scrollX,scrollY的区别
珠穆朗玛小王子的博客
05-07 9482
前言这是前几天面试的时候遇到的一个问题，之前没有专门去研究这三个概念的区别，所以就凭印象回答了这道题，回来就实际研究一下，发现自己回答还算可以吧。正文top、left、right、bottom经过我的亲身测试，总结如下： top、left、right、bottom 都是以父View作为参考物的返回的坐标值。 top：距离父容器的y距离。 left：距离父容器的x距离。 righ
css中 top, right, bottom, left设置为0有什么用？css中，width: 100% 和 width: auto的区别？
热门推荐
EmotionComputer
10-07 1万+
一. 引言 当我们使用position属性时，总免不了与top，left，right，bottom四个属性打交道，那么这四 个属性都设置为0时有什么用，与宽高设置100%又有什么区别？本文对此展开讨论。 二. 关于top left right bottom position定位属性大家都不会陌生，添加position属性的元素可以定位，而top，left，right， bottom属性决定元素定位...
css第七天 定位
zhwqqqqq的博客
03-03 209
通过position属性设置 relative：相对定位 absolute：绝对定位 fixed：固定定位 static：静态定位（渲染在文档流中，默认值） 相对定位 相对定位就是相对于元素原有位置的定位。 注意 这种定位的元素并没有脱离文档流，因此对于它的位置设定不会影响其它兄弟元素 相当于占了一个坑，但是人不在这里 一旦元素设置position（除了static其余三个值均可）会激活四个属性；top，...
爬取经常遇到的问题和解决
07-09
1. 元素没有居中显示：使用flex布局，并设置justify-content和align-items为center，或者将元素的position设置为absolute，再设置top、bottom、left、right为0，再设置margin为auto即可居中显示。 2. 页面加载速度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值