在HTML+CSS中如何实现上一个div覆盖下一个div的border-top部分？

Posted 2023-05-12

上一个divwidth:100px; height:60px;,下一个divwidth:400px; height:290px;

参考技术A 方法很多 1可以给div的外边距设置负值，来覆盖
2可以用绝对定位
3border-top的颜色可以设置要覆盖的div的颜色 形成视觉上的假覆盖 参考技术B 用绝对定位
然后上一个div的z-index值要大于下一个的值
不过这样做比较麻烦吧 你可以定义下一个div没有border-top的追问

问题是下一个div的特色就是border-top部分。忘了说：上一个divwidth:100px; height:60px;,下一个divwidth:400px; height:290px;

追答

比较能够实施的好像只能这样，不管margin怎么设置负值，首先都先要定义z-index，并且z-index好像只有在同级的定位元素上奏效。
否则没有定位的，边距设定成负值，下面的元素也不回被覆盖，而是覆盖上面的元素。

参考技术C 用marging-top:-2px; 试试，需要在上层的加 z-index:999; 试试追问

marging-top:-2px;是下个div吗，如果是这样的话，那整体的布局就乱了，它是规定上部高度是多高的，还有 z-index:999;是什么意思？我不是很明白？能讲的更清楚点嘛？谢谢了！

追答

marging-top:-2px;是让一个div往上2px，z-index就是层次关系，说白的就是z轴，数值越大，越在上层，不建议使用定位，定位会在不同分辨率下出现兼容问题

追问

如果上层是作为一张标签里的插入背景图片，那还能使用该方法覆盖下方的div的border-top吗？

追答

可以，如果只是a标签，外面没有其他div，那必须给a加一个display：block，然a以块状显示，然a的z-index>下层div即可，如果能截个图，会有更好的方案

追问

图我不够等级不能上传，那图的大概意思：上divheight:38px;width:400px;,div里还包含这a标签，a标签中连接图片，，下divwidth:398px; border-top:#FA931D 2px solid; border:#CCCCCC 1px solid; ，要实现a标签覆盖下div的boder-top，就相当于a标签下移了。

追答

你让下面的div上移，给上面那个div加z-index，让它在上，a标签根本不需要动了，有地址没，活着什么，光这样，我也很难回答的。。。或者你把框架写出来，然后告诉我那个在上，哪个在下，我也好理解一些

追问

你的邮箱是多少啊，我可以把网页发给你，你可以帮我看下怎么样设计

参考技术D 对内部div设置上边距为负值吧。
如果要用定位，外部div也要设置定位

敲代码指向光标会覆盖下一个字符，无法用空格换行，无法打字或打字会把后面的文字覆盖解决方法

文章目录

• 无法用空格换行，无法打字或打字会把后面的文字覆盖

无法用空格换行，无法打字或打字会把后面的文字覆盖

不知道大家有没有遇到过这样的问题，反正我有时在写代码的时候遇见过，当时还不知道怎么解决。那就是：在编译器中敲代码或者按空格键时光标后面的一个字就消失了，无法用空格换行，无法打字或打字会把后面的文字覆盖，今天帮主就告诉各位解决这一问题的办法：

遇见此问题一般是由于Word中的“插入模式”变成了“改写模式”所导致的编辑器打字覆盖问题，要解决问题就要从这里下手了。

误触insert键会导致光标后的字符会被消去和覆盖。
Insert键的用途：

Insert键是嵌入，即插入并覆盖，所以当按下Insert键后再输入，光标后的字符会被消去，即被当前输入字符替换掉，再次按下后则会还原到默认插入状态。

解决方案：
再次按下insert键；
但是不同电脑型号不同，要组合按下insert+fn键或者insert+shift键；
惠普电脑的话需要按下insert+fn键;