如何使我的圖像 go 高於 Header

Question

您好，我想要我的個人資料照片/圖像 go 超過 header 區域但是。 如您所見，它正在被切斷。

我嘗試使用代碼並接近我還制作了 position 絕對值，但它弄亂了 flex 尺寸 2（對於關於我的部分）。

那么如何在不弄亂 flex 1 和 flex 2 的情況下解決這個問題呢？ 現在我正在使用 Sass

http://lonestarwebandgraphics.com/

html

<div id="about-me" >
    <div class="container">
        <div class="content-info p-2">
            <h1 class="section-title">About Me</h1>
            <p class="lead">Hello my name is Ruben Esquivel and my dad was a graphic designer so I grew up playing with 
                photoshop since I was a kid. For 10 years I worked as a remote graphic designer / web master running entire graphics department by myself providing mockups for getting sales and turning the mockups into print ready graphics to be printed.
                
                I am an expert in taking directions through phone or email and multi tasking multiple projects at once to meet the deadline. I can handle being under pressure and I am a master of hot keys so I can work fast when needed. 
                
                After working in the industry for 10 years I felt like I knew everything when it came to graphic design so I decided to learn web development because I love learning new things. I love coding and I love taking my web designs and creating beautiful eye catchy websites. To be honest I love both graphic design and coding, being able to take an idea and turn into a design or website is like creating magic for me.</p>

        </div>
        <div class="profile-pic">
            <img class="p-2" src="img/ruben-profile-pic_01.png" alt="Ruben Profile Photo" class="ruben-profile-photo">

        </div>
       
    </div>
</div>

CSS / SASS 代碼

#about-me {
    // z-index: 50;
    // overflow: visible;
    // height: 100%;
    // background: red;
    margin-top: -3rem;
    position: relative;
    
    .container {
        // position: relative;
        display: flex;

        .content-info {
            flex: 2;
        }

        .profile-pic {
            flex: 1;
            margin-top: -5rem;
            // position: relative;
            // position: absolute;
            // right: 0;
            // z-index: 20;

        }

    }

}

Answer 1

我認為它被切斷了，因為你有overflow: hidden為.container指定的。 一個選項是刪除它並減少一點圖像元素的填充，否則會導致出現水平滾動條。 一個好主意也可能是將媒體查詢用於填充，因為容器中元素的寬度與分辨率成正比，但填充不是。

Answer 2

你應該玩弄 z-index

.container{
position: relative;
z-index: 1;
}
.profile-pic{
position:absolute;
z-index: 2;
top:-25px;
}

您可以使用頂部元素。