将一个带有大边框的div放在另一个没有边框的div之上

我正在尝试创建一个；切口"；div在另一个div的顶部。剪切的div大小相同，但有一个大边框。当我尝试使用第一个div的顶部、左侧、偏移宽度和高度，并放置第二个div时，它会放置包括边界的div坐标，这样它就不会在另一个div的上方。

我不知道如何将第二个div放在另一个div的顶部。这是我的代码：

let targetElement = document.querySelector(".div1");
let targetTop = targetElement.getBoundingClientRect().top;
let targetLeft = targetElement.getBoundingClientRect().left;
let targetHeight = targetElement.offsetHeight;
let targetWidth = targetElement.offsetWidth;

let isolateElement = document.querySelector(".div2");
if(isolateElement){
isolateElement.style.top =    (targetTop) +"px";     
isolateElement.style.left =    (targetLeft) +"px";     
isolateElement.style.height =    (targetHeight) +"px";     
isolateElement.style.width =    (targetWidth) +"px";   
isolateElement.style.position = "absolute";
console.log(targetTop);
console.log(targetLeft);
console.log(targetWidth);
console.log(targetHeight); 
}

.div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
top:50%;
left:50%;
}

.div2 {
position: absolute;
z-index:2;
background: transparent;
border:400px solid rgba(0, 0, 0, 0.7) ;
left: -15%;
}

<html>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

使用calc():

let targetElement = document.querySelector(".div1");
let targetHeight = targetElement.offsetHeight;
let targetWidth = targetElement.offsetWidth;

let isolateElement = document.querySelector(".div2");
if (isolateElement) {
isolateElement.style.height = (targetHeight) + "px";
isolateElement.style.width = (targetWidth) + "px";
}

.div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
}
.div2 {
position: absolute;
z-index: 2;
background: transparent;
border: 400px solid rgba(0, 0, 0, 0.7);
top:calc(50% - 400px);
left:calc(50% - 400px);
}

<div class="div1"></div>
<div class="div2"></div>

或者使用轮廓代替边框：

let targetElement = document.querySelector(".div1");
let targetHeight = targetElement.offsetHeight;
let targetWidth = targetElement.offsetWidth;

let isolateElement = document.querySelector(".div2");
if(isolateElement){  
isolateElement.style.height =    (targetHeight) +"px";     
isolateElement.style.width =    (targetWidth) +"px"; 
}

.div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
}
.div2 {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
outline: 400px solid rgba(0, 0, 0, 0.7);
}

<div class="div1"></div>
<div class="div2"></div>

相关内容

最新更新

热门标签：