html - 相対位置、マージン自動、およびブロックとしての img

Question

中央に配置した画像があり、その下の div を部分的にオーバーラップさせようとしていますdisplay: block;。margin: auto;自分のコードのどこが悪いのかわからず、ネット上で情報を見つけることができません (本当に検索しました!)。聞きたくないのですが、position relative と margin auto を混在させることはできますか? それが問題なのですか？コードは次のとおりです。

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;