css 为什么div预览，尽管他的位置设置为相对出现在其他div内？

hc2pp10m 于 2023-01-06 发布在其他

关注(0)|答案(2)|浏览(121)

我会复制粘贴所有的代码，所以你可以检查一切，并了解它的问题是什么。谢谢。
我只是想让它出现在以前的div下。就像它应该的那样，因为这个问题不仅出现在这个div上，而且出现在其他所有东西上。

.presentazione
{
  position: relative;
  top: 100px;
  width:auto;
  height:auto;
  text-align: center;
  font-size:30px;
  border: 2px solid red;
}


.sottofondo
{
  position: relative;
  display: inline-flex;
  width: auto;
  height: auto;

  border: 2px solid grey;
}

.messaggio
{
  position: relative;
  width: auto;
  height: auto;

  border: 1px solid green
}

.sottofondo .icona
{
  position: relative;
  width: auto;
  height: auto;
  border:1px solid pink;
}

.preview
{
  position: relative;
  width: auto;
  height: auto;
}

<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
  <div class="sottofondo">
    <div class="messaggio"> ANOTHER THING </div>
    <div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
  </div>
</div>

<div class="preview"> PROBLEM HERE </div>

css

来源：https://stackoverflow.com/questions/74993315/why-the-div-preview-despite-his-position-is-set-on-relative-appears-inside-the

2条答案

按热度按时间

i2byvkas1#

如果我理解正确的话，你的问题是你的presentazione元素上有top属性，它使元素从页面顶部移动100px，而不推动其他元素。
如果你想让它离顶部有一个100px的距离，最好使用margin-top: 100px。
我从那个类中删除了top属性，它看起来是正确的。

.presentazione {
  position: relative;
  width: auto;
  height: auto;
  margin-top: 100px; /* changed from top to margin-top */
  text-align: center;
  font-size: 30px;
  border: 2px solid red;
}

.sottofondo {
  position: relative;
  display: inline-flex;
  width: auto;
  height: auto;
  border: 2px solid grey;
}

.messaggio {
  position: relative;
  width: auto;
  height: auto;
  border: 1px solid green
}

.sottofondo .icona {
  position: relative;
  width: auto;
  height: auto;
  border: 1px solid pink;
}

.preview {
  position: relative;
  width: 200px;
  height: 200px;
}

<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
  <div class="sottofondo">
    <div class="messaggio"> ANOTHER THING </div>
    <div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
  </div>
</div>

<div class="preview"> PROBLEM HERE </div>

赞(0）回复(0）举报 2023-01-06

ni65a41a2#

您的.presentazione div的位置被设置为relative和它的top:100px，所以其他元素的行为就像它仍然在其原始位置，因此您可以看到重叠，您可以尝试margin-top:100px而不是top:100px，它会工作。https://developer.mozilla.org/en-US/docs/Web/CSS/position

赞(0）回复(0）举报 2023-01-06

我来回答

css 为什么div预览，尽管他的位置设置为相对出现在其他div内？

2条答案

相关问题

热门标签

最新问答