position:relative和z-index解决元素边框重合小bug

最新推荐文章于 2022-10-08 11:37:25 发布
最新推荐文章于 2022-10-08 11:37:25 发布
阅读量196 收藏
点赞数
原文链接：http://www.cnblogs.com/ss977/p/8318288.html
版权

 

由于margin-left:-1;导致一边重合造成以上情况。

解决方法：给元素增加position:relative样式，且给选中的样式增加z-index:1;高于其他未选中元素即可解决。

 

转载于:https://www.cnblogs.com/ss977/p/8318288.html

weixin_30929295
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
z-index用法，position：relative与position：absolute
baochangjian5968的博客
02-28 216
position: static、absolute、relative static : 默认值。如果没有指定position属性，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。 rel...
relative、position与z-index
clearclearing的博客
11-30 430
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 一般来讲
07 CSS-相对定位、绝对定位、固定定位、z-index
路遇惊喜
12-08 8048
定位有三种，分别是相对定位、绝对定位、固定定位。 1、相对定位：position:relative; 2、绝对定位：position:absolute; 3、固定定位：position:fixed; 4、关于z-index
css中z-index与position属性的巧妙应用
好好学习,天天向上,态度决定一切
12-07 869
 //<![CDATA[Sys.WebForms.PageRequestManager._initialize(AjaxHolder$scriptmanager1, document.getElementById(Form1));Sys.WebForms.PageRequestManager.getInstance()._updateControls([tAjaxHo
css：position 与 z-index 问题（1）
liuboman的博客
03-14 468
你对CSS中的position定位和z-index属性的用法是否了解，position属性中static、absolute、relative三个参数，这里和大家分享一下其用法。 深入理解CSS中的position定位和z-index属性 由于平时不太用到，所以过去写CSS的时候对于position属性的absolute、relative值理解比较模糊，对于z-index的层叠更是摸不着头脑，除
chrome中position:fixed对z-index的影响
02-26
dom结构：正常的实现方式很容易：因为B本身就在A的后面，当A和B都设置了position属性（非static），且没有设置z-index的时候，其层叠关系是后面的元素覆盖前面的元素，这样只需要给A-child设置z-index属性值即可。...
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
z-index为负值的元素无法点击到的解决方法
09-22
主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下
ie6 z-index不起作用的完美解决方法
09-24
下面小编就为大家带来一篇ie6 z-index不起作用的完美解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
div层调整z-index属性无效原因分析及解决方法
09-24
在CSS中，z-index属性只能作用于定位元素，即那些position属性为relative、absolute或fixed的元素。当元素被设置为static时（也是position属性的默认值），其z-index属性将不会生效。这是因为在静态定位的元素上，...
使用position:relative制作下边框下的小三角
sunny327的专栏
11-12 1245
使用position:relative来布局选项卡功能，各个选项卡的内容不同，宽度不同有下边框且下边框下还有小三角，使用css来写小三角而非背景图片，使div的上边框、左边框、右边框都为3px，颜色都相同，下边框为none,就可实现。
CSS3--关于z-index不生效问题
weixin_30640769的博客
10-27 272
最近写CSS3和js结合，遇到了很多次z-index不生效的情况： 1.在用z-index的时候，该元素没有定位（static定位除外） 2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设置为负数 下拉框例子： 1.盖住的时候： 2.将下拉框的z-index设置为负数 代码： ...
css之搞清楚z-index
树上骑个猴的博客
04-20 698
在 CSS 中，我们都明确的知道用 z-index 可以来控制 HTML 的层级顺序。元素有着越大的指数将会排在页面的最顶部： <style> .box { position: relative; width: 50px; height: 50px; border: 3px solid; background: silver; } .first.box { z-index: 2; } .second.box { z-in
css：四种定位（position)以及z-index层级
YangLu888
10-08 1816
css的四种定位以及z-index层级调整
z-index失效的几种情况，父标签position属性为relative的时候,详解
小嘟的博客
09-11 9281
网上对这一方面解释的很多，我也不想把别人的都全抄过来。在这里我想的是加上我对这些情况的理解还有我的一些疑惑，若有问题，请留言，谢谢！！！话不多说，进入正题： 首先 z-index在何种情况下生效呢？ （1）首先Z-index 仅能在定位元素上奏效（也就是说要有position属性，再详细的说，它的值需要是relative、absolute、fixed） 补充：它的值也可以写成inherit，只要它的结果能是上边的三种也可以。不能是static，因为这个是默认值，相当于没有定位 首先测试定位为abso
position之relative
lbs311709000127的博客
01-18 6546
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
深入理解css中position属性及z-index属性
weixin_33835103的博客
11-29 610
深入理解css中position属性及z-index属性 　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。   第一部分：...
position和relative以及z-index的一些小坑坑
weixin_38269675的博客
03-25 4758
relative和absolute要在父元素和子元素上才有效果 当他们不是父子元素的时候，absolute其实是相对于body定位的 这里就是应证了上面的一个层叠问题，在这里z-index设置是无效的，黄色依旧被紫色覆盖了 这里把z-index设置在absolute的d上就可以了…不知道为啥单独给c设置index很大的数值是无效的…或者两个都设置… ...
position属性（absolute; relative; fixed)以及相关属性z-index
cqpersonal的博客
10-09 1718
position是定位的一种非常有用的标签，它的属性值有: static（静态定位）、absolute（绝地定位）、relative（相对定位）以及fixed(固定定位）这四种。在使用这中定位时，也经常会遇到一种z-index属性值，它是只属于position的属性值。以下文章主要讲述position的各个属性值的使用，以及它们与z-index的关联。 1.position的绝对定位和相对定位
.new_ul { border-radius: 0 0 8px 8px; position: relative; &:hover { &::before { content: ''; position: absolute; z-index: 3; left: 0; bottom: 0; background-color: #2280fb; width: 100%; height: 100%; } } li { position: relative; z-index: 4; } &::before { content: ''; position: absolute; z-index: 3; left: 0; bottom: 0; background-color: #2280fb; width: 0%; height: 0%; } }给这段代码添加动画
最新发布
05-28
可以使用CSS动画来为这段代码添加动画效果。以下是一个简单的示例： ``` .new_ul { border-radius: 0 0 8px 8px;...当鼠标悬停在列表的容器上时，伪元素的宽度和高度会从0%逐渐过渡到100%，从而创建一个动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值