相对定位，边距自动和图像作为块

Question

我有一张我以display: block;和margin: auto;为中心的图片，我试图将其下方的div部分重叠。我似乎无法弄清楚我的代码有什么问题，我在网上找不到任何信息（我真的搜索过了！）。我不想问，但我甚至可以混合位置相对和保证金自动？问题是什么？这是代码：

HTML：

<div class='container'>        
    <img class='img-circle bio_pic' src='img/Matthew_bio_fin.jpg'>    
    <div class="jumbotron">
        <div class="container">
            <h1>Hi! I'm ...!</h1>
            <p>...</p>
        </div>
</div>

CSS：

.bio_pic {
    width: 190px;
    height: 150px;
    margin: 0 auto 0 auto;
    border: solid green 4px;
    display: block;
    position: relative;
    top: 80;
    z-index: 5;
}

Answer 1

你缺少单位：

top: 80px;