Html css中有没有一种方法可以使一个div浮动在另一个div上，但在向下滚动时不浮动

我有一个矩形图像和一个圆形图像。矩形图像需要低10em，因为顶部有横幅图像。圆的一半需要在矩形内，另一半在矩形外。 圆的中心需要稍微靠近矩形基线的中点

然后页面上有一堆文本。因此，圆需要相对于矩形，而不是页面的其余部分。我将如何使用CSS实现这一点？这个div实际上显示在图像上方

如果我在它周围放了一个div或section，就会弄乱分层。我错过了什么？ （也只能使用CSS和HTML）

#外{
位置：固定；
顶部：12em；
左：0；
宽度：80%；
高度：400px；
左边距：10%；
保证金权利：10%；
背景图片：url（SOMEURL）；
}
#内在的{
宽度：300px；
高度：300px；
顶部：300px；
保证金：0；
位置：相对位置；
背景图片：url（）；
背景尺寸：封面；
显示：块；
边界半径：300px；
-webkit边界半径：300px；
-moz边界半径：300px；
}
这里有一些文字

您能检查一下下面的代码吗？希望它对你有用。我们使用了

transform:translate（-50%，-50%）和
位置：绝对以解决您的问题


#外部{
位置：相对位置；
宽度：600px；
高度：400px；
背景图像：url（“https://dummyimage.com/600x400/000/fff");
背景重复：无重复；
边缘底部：160px；
}
#内在的{
宽度：300px；
高度：300px；
顶部：300px；
保证金：0；
位置：绝对位置；
左：50%；
最高：100%；
转换：翻译（-50%，-50%）；
背景图像：url（“https://dummyimage.com/600x400/ada4ad/fff");
背景重复：无重复；
背景尺寸：封面；
显示：块；
边界半径：300px；
-webkit边界半径：300px；
-moz边界半径：300px；
}

洛勒姆
这里有一些文字
您可以尝试将
位置：相对
添加到
外部
和
位置：绝对
添加到
内部
。另外，
已弃用，不再推荐使用。
<style type="text/css">
    #outer{
    position:fixed;
    top:12em;
    left:0;
    width:80%;
    height:400px;
    margin-left:10%;
    margin-right:10%;
    background-image: url(SOMEURL);
    }
    #inner{
        width: 300px;
        height: 300px;
        top: 300px;
        margin: 0;
        position: relative;
        background-image: url();
        background-size: cover;
        display: block;
        border-radius: 300px;
        -webkit-border-radius: 300px;
        -moz-border-radius: 300px;
    }
  </style>

<center>
  <div id=outer class="rectangle-Image-bg">
    <div id=inner >
    </div>
  </div>
<div>Some text here
<div>
</center>