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

如果您要相对于一个元素进行绝对定位（我想这句话只有在关于CSS时才有意义...），您可以将CSS规则position:relative设置为参考元素：< / p>

HTML：

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

CSS：

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

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

Working fiddle。

Answer 2

首先，我们使outside_element为mycontent的子代。 下一步，我们设置每个元素的position。 outside_element应该有position:absolute;，而mycontent应该有position:relative。最后，我们调整left，right，top或bottom属性以调整其物理位置。希望这会有所帮助：）

关于您的第二个问题：您需要将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 3

在包装器或mycontent中移动外部元素。

将position:relative赋予“包装器”或“ mycontent”，并将position:absolute赋予“外部要素”。

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

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

3 个答案: