Question

基本上，我一直在尝试各种定位，但事实并非如此，但问题在于：

给定一个形状像矩形的div，我试图在其上覆盖另一个div，它将是宽度的50％。但是，如果我这样做，那么下面的div也会改变它的形状/位置。

如何防止htis发生？

我知道如何制作容器，但内部内容受外部内容约束。

在这种情况下，我想在较大的潜水中放置一个较小的div，而不会弄乱下面的div。

<div class="overlay">
  <div class="image">
  </div>
</div>

Answer 1

如果你将它们包含在另一个div中怎么办？像这样：

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    height: 300px;
    width: 250px;
    position: relative;
}
div.overlay {
    position: absolute;
    border: 3px solid #73AD21;
    left: 0px;
    top: 0px;
    width: 50%;
    bottom: 0px;
    display:block;
} 

div.image {
    position: absolute;
    top: 0px;
    width: 200%;
    height: 100%;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="container">
  <div class="overlay">This div element has position: relative;
    <div class="image">This div element has position: absolute;</div>
  </div>
</div>
</body>
</html>

https://www.w3schools.com/code/tryit.asp?filename=FE87FF3WRXHF

Answer 2

如果我理解正确的话，请查看这个小提琴

你可以使用

float:left

https://jsfiddle.net/wuvxuddk/

将div从正常流程中取出或使用

position: absolute

https://jsfiddle.net/tygpoxuk/

如何将div放在另一个div或元素上，但是它是该div的50％（尝试点击事件）

2 个答案: