Question

通过查看here

，您可以了解问题所在

正如你所看到的那样，文章文字围绕在一边，我已经相对于它的当前位置而移动了。

以下是相关的CSS：

aside {
    float: left;
    z-index: -1;
    padding: 10px;
    position: relative;
    right: 275px;
    background: linear-gradient(rgb(0,200,0),rgb(0,175,0));
    width: 230px;
    box-shadow: 0px 5px 0px rgb(0,90,0);
}

article {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    background-color: rgb(0,175,0);
    width: 540px;
}

我不希望这种情况发生。我已经尝试过一个绝对的位置，这是一个解决方案，但有这样我可以这样做吗？

Answer 1

这就是position: relative的工作原理。简单来说：元素像往常一样占据空间，但相对于原始位置显示在指定的左/上位置。

解决方案是去除相对定位并使用负左边距而不是左/右：

aside {
    float: left;
    padding: 10px;
    background: linear-gradient(rgb(0,200,0),rgb(0,175,0));
    width: 230px;
    box-shadow: 0px 5px 0px rgb(0,90,0);
    /* remove              */
    /* z-index: -1;        */
    /* position: relative; */
    /* right: 275px;       */
    /* insert              */
    margin-left: -260px;
}

Answer 2

您可以使用绝对位置修复此问题，将样式更改为：

section {position: relative}
aside {position: absolute; left: -275px; top: 80px;

但它只是修复了错误的HTML标记，正确的方法是在没有定位的情况下浮动aside和article元素。

如何阻止文本环绕浮动块？

2 个答案: