Html Css div绝对值被文本包围

我试图用position:absolute来包围div。 始终将文本置于div下

我正在使用的CSS：

.all {
    display: block;
    width: 250px;
    min-height: 180px;
    height: auto;
    position: relative;
    background: #fa65fc;
}
.abs {
    position: absolute;
    top:  80px;
    left: 200px;
    float: right;
    width: 50px;
    height: 100px;
    background: #4542df;
}

两个分区：

<div class="all">
    <div class="abs">ABS</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

防抱死制动系统
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

以下是链接：

我想这样做：

---

提前感谢。

使用绝对位置时无法做到这一点。但是，您可以使用静态位置和

float:right带有一些边距

以下是更新的JSFIDLE：

HTML:

你不能用绝对位置。但是，您可以使用静态位置和
float:right带有一些边距

以下是更新的JSFIDLE：

HTML:

您可以通过使用css插入一个虚拟元素来实现所需的结果。此方法意味着您不需要将
定位在该div内容的中间。如果您无法控制内容是什么（在cms中输入内容的情况下），则此方法可能有用

HTML:

链接到

.all:before
插入一个虚拟元素，该元素在
的最开始处向右浮动，没有宽度，高度为80px

因为
.abs
是向右浮动的（但不是绝对定位的），所以它现在将尝试保持在div顶部的右侧浮动。添加
清除：两个
都会迫使它下降到任何其他浮动元素的下方，因此，它最终向下移动80px以清除它前面的虚拟浮动。
您可以通过使用css插入虚拟元素来实现所需的结果。此方法意味着您不需要将
定位在该div的内容的中间。如果无法控制内容是什么（在cms中输入内容的情况下），则此方法可能会使用

HTML:

链接到

.all:before
插入一个虚拟元素，该元素在
的最开始处向右浮动，没有宽度，高度为80px

因为
.abs
是向右浮动的（但不是绝对定位的），所以它现在将尝试保持在div顶部的右侧浮动。添加
清除：两个
都会迫使它下降到任何其他浮动元素的下方，因此，它最终向下移动80px以清除前面的虚拟浮点。
绝对定位div不可能。绝对定位div不可能。是的，我知道image，但这个解决方案对我来说不好，因为将生成此文本。是的，我知道image，但这个解决方案对我来说不好，因为这篇文章会被生成。非常感谢！这就是我需要的：））因为我在使用WordPress，我无法控制div前后的文本。这是一个我不知道的好方法，向上投票！谢谢！这就是我需要的：））因为我在使用WordPress，我无法控制div前后的文本。这是一个我不知道的好方法，向上投票！
<div class="all">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
<div class="abs">ABS</div>
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

.all {
    display: block;
    width: 250px;
    min-height: 180px;
    height: auto;
    position: relative;
    background: #fa65fc;
}
.abs {
    float: right;
    width: 50px;
    height: 100px;
    background: #4542df;
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

<div class="all">
    <div class="abs">ABS</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

.all {
    display: block;
    width: 250px;
    min-height: 180px;
    height: auto;
    position: relative;
    background: #fa65fc;
}

.all:before { 
    content: "";
    float: right;
    height: 80px;
    width: 0;
}

.abs {
    clear: both;
    float: right;
    width: 50px;
    height: 100px;
    background: #4542df;
}