Как сделать мое изображение go над заголовком - PullRequest
Новая
       108

Как сделать мое изображение go над заголовком

0 голосов
/ 12 июля 2020

Здравствуйте, я хочу, чтобы моя фотография профиля / изображение go находилась над областью заголовка, но. Как видите, он обрезается.

enter image description here

I tried playing around with the code and I got close I also made the position absolute but it messes up the flex size 2 (for the about me section).

So how can i fix this without messing up the flex 1 and flex 2? Right now I am using Sass

http://lonestarwebandgraphics.com/

enter image description here

html


     Обо мне  Здравствуйте, меня зовут Рубен Эскивель, и мой отец был графическим дизайнером c, поэтому я вырос, играя в Photoshop с детства. В течение 10 лет я работал удаленным графическим дизайнером / веб-мастером, управляя целым графическим отделом самостоятельно, предоставляя макеты для продажи и превращая макеты в готовую к печати графику для печати. Я эксперт в прокладывании маршрутов по телефону или электронной почте и одновременном выполнении нескольких задач в нескольких проектах, чтобы уложиться в срок. Я могу справляться с давлением, и я мастер горячих клавиш, поэтому могу работать быстро, когда это необходимо. Проработав в индустрии 10 лет, я почувствовал, что знаю все, что касается графического c дизайна, поэтому я решил изучить веб-разработку, потому что мне нравится узнавать новое. Я люблю кодировать, и мне нравится использовать свой веб-дизайн и создавать красивые запоминающиеся веб-сайты. Честно говоря, мне нравится как графический c дизайн, так и кодирование, возможность взять идею и превратить ее в дизайн или веб-сайт для меня все равно, что создавать magi c.   Рубен Фото профиля

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;

        }

    }

}

Ответы [ 2 ]

0 голосов
/ 12 июля 2020

Вы должны поэкспериментировать с z-index 

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

Вы можете поэкспериментировать с верхним элементом.

0 голосов
/ 12 июля 2020

Я думаю, что он отключен, потому что вы указали overflow: hidden для .container. Можно удалить его и немного уменьшить отступ элемента изображения, поскольку в противном случае появляется горизонтальная полоса прокрутки. Хорошей идеей также может быть использование медиа-запросов для заполнения, потому что ширина элементов в контейнере пропорциональна разрешению, а заполнение - нет.

...