div漂浮在其他响应div上

Question

我正在创建一个简单的在线卡界面，其中用户有个人资料图片，然后是下面的一些细节。但是，为了实现这一点，我需要将个人资料图片悬停在两个div之上。这些div的编码响应于bootstrap，这对我来说很难。您可以在下面找到我的模型和代码：

代码

<div class="col-md-3 col-sm-4 col-xs-12">

    <!--Faded background profile picture-->
    <div class="col-md-12">
    </div>

    <!--White container for text-->
    <div class="col-md-12">
    </div>

</div>

Answer 1

看看这个（它是您正在处理的简化版本，但应该帮助您弄清楚如何使其正常工作）： JSFiddle

<div class="col-md-3 col-sm-4 col-xs-12">
    <div class="col-md-12">
            <div class="" id="little-circle"></div>
    </div>
    <div class="col-md-12">&nbsp;</div>
</div>

.col-xs-12 { width: 90%; }
.col-xs-12 { position: absolute; height: 90%; margin-top: -45%; top: 50%; margin-left: -45%; left: 50%; }
.col-md-12 { width: 100%; background: purple; height: 25%; position: relative; }
.col-md-12:last-child { background: white; height: 75% }
body { margin: 0; padding: 0; background: #e6e6e6; }
div#little-circle { width: 100px; height: 100px; position: absolute; background-color: orange; bottom: -50px; z-index: 99; left: 50%; margin-left: -50px; border-radius: 50%; }