如何让我的图片超过 Header

Question

您好，我希望我的个人资料照片/图片位于 header 区域但是。如您所见，它正在被切断。

我试着玩弄代码，我接近了我也将位置设置为绝对位置，但它弄乱了 flex 大小 2（关于我部分）。

那么我怎样才能在不弄乱 flex 1 和 flex 2 的情况下解决这个问题呢？现在我正在使用 Sass

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

我认为它被切断了，因为您为 .container 指定了 overflow: hidden。一个选项是删除它并减少图像元素的填充，否则它会导致出现水平滚动条。一个好主意也可能是对填充使用媒体查询，因为容器中元素的宽度与分辨率成正比，但填充不是。

Answer 2

你应该试试 z-index

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

您可以尝试使用顶部元素。

如何让我的图片超过 Header

How do I make my Image go above the Header

html

css

image

sass

css-position