如何隐藏覆盖的 div 边框？如果两个 div 覆盖，则仅从覆盖区域删除边框答案

【问题标题】：how to hide overridden div borders? if two div override then remove borders from overridden area only如何隐藏覆盖的 div 边框？如果两个 div 覆盖，则仅从覆盖区域删除边框
【发布时间】：2021-06-07 10:52:45
【问题描述】：

我有两个相互覆盖的 div。我只想从覆盖区域中删除边框。请看下面的示例代码

<div  style="width:100px; height:20px; background-color:#5475b1;border: 2px solid;"></div>
<div  style="width:150px; height:200px; background-color: #5475b1;border: 2px solid;"></div>

此代码将输出为：

但我希望输出为：

我怎样才能做到这一点？请帮忙。

注意：我正在处理下拉菜单。第一个 div 实际用于菜单名称，第二个 div 用于菜单列表。

【问题讨论】：

标签： html css angular bootstrap-4 sass

【解决方案1】：

有几种方法可以做到这一点。但基本机制是相似的。一种方法是：

Tab 元素底部没有边框。
菜单元素在选项卡元素下向上滑动，与边框一样高。

参见（又快又脏）代码中的 cmets 示例：

nav div {
    background-color: yellow;
    padding: 20px;
}

.tab {
    position: relative;
    width: 100px;
    margin-left: 50px;
    text-align: center;
    /* no border bottom */
    border-top: 4px solid red;
    border-right: 4px solid red;
    border-left: 4px solid red;
    /* tab to foreground*/
    z-index: 10;
}
.menu {
    width: 300px;
    /* border all arround */
    border: 4px solid red;
    /* element in background */
    z-index: 9;
    /* move menu up = slid under tab */
    position: relative;
    top: -4px;
}

<nav>

    <div class="tab">Menutab</div>

    <div class="menu">
        Menuitem<br>
        Menuitem<br>
        Menuitem<br>
        Menuitem<br>
        Menuitem<br>
        ...
    </div>

</nav>

【讨论】：

【解决方案2】：

检查此代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
#divTop {
  height:20px; 
  width:100px;
  background: #5475b1; 
  border: solid black;
  border-width: 2px 2px 0;
  position: relative;
  transform: translateY(3px);
}
 
 #divBottom {
  height:200px;
  width:150px; 
  background: #5475b1; 
  clear: both; 
  border: 2px solid black;
}
    </style>
</head>
<body>
    <div id ="divTop"  ></div>
    <div id ="divBottom" ></div>
</body>
</html>

【讨论】：