CSS - 相对于另一个绝对值在 div 之外的位置

Question

举个例子，如果我有一个简单的布局，看起来像这样......

.outside_element {
height:50px;
width:100px;
text-align:center;
background:red;
color:white;
}

<div class="outside_element">
Outside Content
</div>
<div class="wrapper">
<div class="mycontent">
<p>
This is some example content
</p>
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>

但是我无法控制HTML的输出，outside_element总是在我的其余内容之外输出。有没有办法将outside_element定位为 .mycontent？

事件虽然outside_element不在那个div内？

我可以单独使用 CSS 来实现这一点，还是我需要先做一些 JavaScript 来移动它？

Answer 1

首先，我们让outside_element成为mycontent的孩子。接下来，我们设置每个元素的position。outside_element应该有position:absolute;，而mycontent会有position:relative。最后，我们调整左、右、上或下属性来调整其物理位置。希望这对:)有所帮助

关于你的第二个问题：你需要把你的outside_element放在mycontent里面，因为它会寻找一个有position:relative的父元素，并将其作为引用。

.outside_element {
height:50px;
width:100px;
text-align:center;
background:red;
color:white;
position: absolute;
top: 0%;
right:0%;
}
.mycontent{
position:relative;
}

<div class="wrapper">
<div class="mycontent">
<div class="outside_element">
Outside Content
</div>
<p>
This is some example content
</p>
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>

Answer 2

如果你试图绝对地将一个元素相对于彼此定位(这句话只有在我猜是关于CSS时才有意义......(，你可以将CSS规则position:relative设置为引用元素：

.HTML：

<div class="relative-box">
<p>
Hi all
</p>
<div class="absolute-box">
Yes!
</div>
</div>

.CSS：

div.relative-box {
position: relative;
height: 5em;
width: 10em;
border: 2px solid black;
box-sizing: border-box;
background-color: #808080;
}

div.absolute-box {
position: absolute;
right: 0em;
bottom: 0em;
height: 2em;
width: 3em;
box-sizing: border-box;
border: 2px solid black;
background-color: #f0f0f0;
}

工作小提琴

Answer 3

将外部元素移动到包装器或 mycontent 内部。

position:relative给"包装器"或"mycontent"，position:absolute给"外部元素"。

如果它不起作用，请告诉我。