Question

我有一个div框，在HTML代码中低于所有其他内容，而不是嵌套到其他任何内容中。在CSS中，我将div放在网站的右上角，当我更改窗口大小以使其不适合时，它会在网站上跳转。我不允许更改HTML代码（它是学校作业）。

有什么方法可以让这个跳跃的div框相对于主要内容保持不变？

在div框中我放置了背景图片，因为这是在不更改HTML的情况下添加独立图片的唯一方法。老师在代码中添加了这些额外的div框。

div的CSS（如果它有帮助）：

#extraDiv1 {
    background-image: url('images/koala.png');
    background-repeat: no-repeat;
    background-size: 250px;
    width: 250px;
    height: 370px;
    float: left;
    margin-left: 20px;
    margin-top: -610px;
    position: relative;
    z-index: -1;
}

Answer 1

您可以使用top和left属性正确定位您的包装盒。由于您使用相对定位，因此将相对于其正常位置定位。因此，如果你想把它与你想要的地方对齐，你最终会得到这样的结果：

#extraDiv1 {
    background-image: url('images/koala.png');
    background-repeat: no-repeat;
    background-size: 250px;
    width: 250px;
    height: 370px;
    position: relative;
    z-index: -1;
    border: 3px solid red;
    top: -610px;
    left: 660px;
}

希望这有帮助！

使一个非嵌套的div不会在窗口大小调整时跳转

1 个答案: