Question

我正在尝试为我的网站制作一些标题，并在其下方创建另一个div，以包含彩色矩形。可能吗？到目前为止我试过这样，但没有运气：

    .logo {
      width: 100%;
      left: 0%;
      right: 0%;
      position: absolute;
    }

<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:15%; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
</div>
<div style="padding:0%">123</div>

包含“123”的div应位于标题div下方。我怎么能这样做？

Answer 1

首先，你不应该使用这么多的内联样式。而是在css类中使用它（就像你对.logo中的一些代码所做的那样）

你可以用这样的东西来实现你的定位：

.header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: grey;
    background-image: url('');
    background-position: center center; 
    background-size: 100% 100%;
}
.numbers {
    margin-top: 50px;
    height: 100px;
    background-color: blue;
    width: 100%;
}

而html就是这样：

<div class="header"></div>
<div class="numbers">123</div>

您只需将relative容器与margin-top放置在绝对容器的高度

我真的不喜欢带边距的绝对px解决方案。如果这个标题应该总是这样（带有三角形和数字等），我建议将这两个容器包装成一个绝对容器，并将它们放在relative中，就像你在这里找到的那样：

＆＃13;

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.header {
    display: block;
    height: 50px;
    width: 100%;
    background-color: grey;
}
.numbers {
    height: 100px;
    background-color: blue;
    width: 100%;
}

＆＃13;

<div class="wrapper">
    <div class="header"></div>
    <div class="numbers">123</div>
</div>

＆＃13;

Answer 2

在这种情况下，下面的div需要一个margin-top值等于绝对定位div的高度。

<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:100px; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">

123

Answer 3

不容易修复......如果你完全设置了某些东西，就像那里的徽标一样，你可以将它从文档流中分离出来。因此，页面的其余部分将不关心它的位置，也不能将其置于其旁边。它只会在它之下或之上。

您可以使用javascript检测徽标的位置，如果它也是aboslute，则将另一个放在旁边。

我认为您想要将徽标设置为位置：固定而不是添加margin-top到身体，以便始终从徽标结束处开始。这样，当您滚动时，徽标将始终位于顶部并跟随您，身体不会被徽标覆盖。

将div放在另一个绝对div下面

3 个答案: