Позиционирование label

21 июня 2021, 19:40

Не получается задать позиционирование тексту для загрузки аватара. Есть еще одна проблема, имеется выпадающее меню в вверху, она перестала работать из-за background а именно из-за position: relative; как это можно исправить? В лайве у меня выглядит так http://prntscr.com/oxpa5p

@import '/styles.css/normolize.css'; 
 
body { 
    font-family: 'Paytone One', sans-serif; 
    font-family: 'Roboto', sans-serif; 
} 
 
.section-inner { 
    max-width: 1214px; 
    width: 100%; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
} 
 
/* Каркас сайта END */ 
 
/* HEADER */ 
.section-menu-top { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 15px; 
    align-items: center; 
} 
 
.section-logo { 
    color: #959597; 
    font-size: 18px; 
    font-weight: bold; 
    flex-shrink: 1; 
    transition: color 0.2s linear; 
 
} 
 
.section-logo:hover { 
    color: #C4C4C4; 
    opacity: 1; 
    text-decoration: none; 
} 
 
/* Отступ сверху от меню */ 
 
.background-profile-images { 
    padding-top: 26px; 
} 
 
.section-menu { 
    display: flex; 
    list-style: none; 
    position: relative; 
     
} 
 
/* Цвет ссылок с плавным подсвечиванием */ 
 
.section-menu a { 
    text-decoration: none; 
    color: #364655; 
    margin-left: 38px; 
    line-height: 0.8; 
    transition: color 0.2s linear; 
} 
 
 
/* Подсветка текста в горезонтальном меню при навидении */ 
 
.section-menu a:hover { 
    color: #C4C4C4; 
    opacity: 1; 
}    
 
/* Появление выпадающего меню */ 
 
.section-menu li:hover .sub-menu  { 
    display: block;  
} 
 
/* При навидении на меню появляется фон */ 
 
.sub-menu { 
    display: none; 
    position: absolute; 
    width: 30%; 
} 
 
/* Текст в выпадающем меню до навидения на текст */ 
 
.sub-menu a { 
    color: #364655; 
    padding: 12px 16px; 
    display: block; 
     
} 
 
/* Меняет цвет текста в выпадающем меню */ 
 
.sub-menu a:hover { 
    color: #364655; 
} 
 
/* Выделение текста в выпадающем меню при навидении */ 
 
.sub-menu a:hover { 
    background-color: #f1f3f5; 
    width: 60%; 
} 
 
/* Background в профиле */ 
 
.background-profile-images { 
    display: flex; 
    position: relative; 
} 
 
/* Кнопка загрузки background */ 
 
.loader-photo { 
    position: absolute; 
    justify-content: flex-end; 
    bottom:11px; 
    right:17px; 
} 
 
/* Убирает стандартную кнопку input */ 
 
.inputfile { 
    overflow: hidden; 
	opacity: 0; 
    z-index: -1; 
} 
 
/* Новые стили для кнопки */ 
 
.inputfile + label { 
    padding: 8px 30px ; 
    font-weight: 300; 
    border-radius: 6px; 
    color: white; 
    background-color: rgba(255,255,255,.3); 
    display: inline-block; 
    cursor: pointer;  
} 
 
/* Позиционирование аватра */ 
 
.avatar-profile { 
    position: absolute; 
    top: 100%; 
    left: 80px; 
    transform: translateY(-90px); 
} 
 
/* Задается закругление к аватару в профиле */ 
 
.avatar-radius { 
    border-radius: 30px; 
} 
 
/* Кнопка загрузки avatar */ 
 
.loader-avatar { 
    position: absolute; 
    justify-content: flex-end; 
    transform: translateY(-60px); 
} 
 
/* Убираем стандартную форму загрузки, avatar */ 
 
.inputavatar { 
    overflow: hidden; 
	opacity: 0; 
    z-index: -1; 
} 
 
.inputavatar + label { 
    padding: 0 48px 16px 57px; 
    font-weight: 300; 
    border-radius: 13px 13px 111px 117px; 
    color: white; 
    background-color: rgba(255,255,255,.3); 
    display: inline-block; 
    cursor: pointer;  
} 
 
.asd1 { 
    width: 90%; 
    right: 20px; 
    top: 20px; 
}

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
        <link 
            rel="stylesheet" 
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
            crossorigin="anonymous"> 
        <link rel="stylesheet" href="/profile/profile.css"> 
        <link 
            href="https://fonts.googleapis.com/css?family=Roboto:300,300i,700&display=swap" 
            rel="stylesheet"> 
        <meta 
            name="viewport" 
            content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
        <meta name="discription" content="Программы тренировок для новичков"> 
        <meta 
            name="keywords" 
            content="Программа тренировок, подтягивания, отжимания, приседания, отжимания на брусьях"> 
        <title>Sport-defense - profile</title> 
    </head> 
    <body> 
 
        <section class="section-outer section-header"> 
            <div class="section-inner"> 
                <div class="section-menu-top"> 
                    <a class="section-logo" href="/index.html">Sport-defense</a> 
                    <nav> 
                        <ul class="section-menu"> 
                            <li> 
                                <a href="#">Новости</a> 
                            </li> 
                            <li> 
 
                                <a href="#">Программы тренировок</a> 
 
                                <ul class="sub-menu"> 
                                    <li> 
                                        <a href="#1">Подтягивания</a> 
                                    </li> 
                                    <li> 
                                        <a href="#2">Отжимания</a> 
                                    </li> 
                                    <li> 
                                        <a href="#3">Приседания</a> 
                                    </li> 
                                    <li> 
                                        <a href="#3">Брусья</a> 
                                    </li> 
                                </ul> 
 
                            </li> 
                            <li> 
                                <a href="#">Комплексы</a> 
                            </li> 
                            <li> 
                                <a href="#">Рейтинговая система</a> 
                            </li> 
                            <li> 
                                <a href="#">Профиль</a> 
                            </li> 
                        </nav> 
                    </ul> 
                </div> 
                <div class="background-profile-images"> 
                    <img src="https://cdn1.radikalno.ru/uploads/2019/8/26/1d277fb25a530c413f9dbe3bbd930195-full.jpg"> 
 
                    <form class="loader-photo"> 
                        <input type="file" name="file" id="file" class="inputfile"/> 
                        <label for="file">Загрузить</label> 
                    </form> 
 
                    <div class="avatar-profile"> 
                        <img class="avatar-radius" src="https://cdn1.radikalno.ru/uploads/2019/8/26/b0ea8279c02e65164db14e87c64cfdc8-full.jpg"> 
                         
                        <form class="loader-avatar"> 
                                <input type="file" name="file" id="file" class="inputavatar"/> 
                                <label class="asd1" for="file">Загрузить</label> 
                        </form> 
                    </div> 
                </div> 
 
                <div class="statistic-profile"> 
                    <li> 
                        <a href="#">Данные</a> 
                    </li> 
                    <li> 
                        <a href="#">Статистика</a> 
                    </li> 
                    <li> 
                        <a href="#">Достижения</a> 
                    </li> 
                    <li> 
                        <a href="#">Фотографии</a> 
                    </li> 
                    <li> 
                        <a href="#">Видео</a> 
                    </li> 
                </div> 
            </body> 
        </html>

Answer 1

Чтобы выпадающее меню не скрывалось за картинкой, добавьте параметр z-index классу .section-menu-top

.section-menu-top {
    z-index: 100;
}

По поводу позиционирования текста "Загрузить", могу посоветовать следующее:

Растянуть класс.loader-avatar по ширине родителя

.loader-avatar {
width: 100%;
}

А также задать Ваш текст по ширине родителя, убрать все отступы (margin и padding) и выровнять текст по центру. Не забудьте удалить все остальные значения у текста. Дальше дело за малым - попробуйте поиграться со значением padding у текста, чтобы найти идеальное для Вас решение.

.asd1 {
width: 100%;
margin: 0!important;
padding: 0!important;
text-align: center;

}

Так выглядит Ваш сайт в Google Chrome

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Создание прелоадера SVG не круглой формы

Необходимо создать SVG прелоадер для сайта, но не умею работать с самими SVG (рисовать правильно)Идея такая:

102

HTML

Как сверстать стул как на картинке?

Как сверстать такой стул, как на картинке, чтобы ножки не вылезали, а сиденье вылезало за пределы круга?

106

HTML

библиотека fullpage js

Скачал и подключил библиотеку fullpagejs, в консоль пишет

108

HTML

Почему не применяются стики к тексту input type=email который выбираю из всплывающих подсказок?

После того как я получаю ответ от сервера с ошибкойЯ присваиваю

113