Относительное позиционирование работает в chrome с дочерним элементом block, но не с inline-block или inline child. - PullRequest
Новая
       17

Относительное позиционирование работает в chrome с дочерним элементом block, но не с inline-block или inline child.

0 голосов
/ 11 мая 2019

Я пытался создать страницу и использовал относительное позиционирование по центру (вверху: 45%) кнопки header__main__button в моем заголовке header__main, но похоже, что в chrome относительное позиционирование работает только на дочерних элементах блока, так какработает с блоком, но не со встроенным или встроенным блоком, но нужно знать, что он работает со всеми тремя на Firefox и IE11 .У меня есть указанная ширина и высота также для родительского элемента.

Я позаботился обо всех функциях поддержки браузера и использовал путь к клипам, который не поддерживается в IE11.

Поскольку этот проект большой, я показал только частичную полезностьчасть.Остальное все хорошо.Вот код:

index.html: 

<div class="header__main">
    <div class="header__main__brand"></div>
    <div class="header__main__text">
    <h1 class="header__main__text--big">OUTDOORS</h1>
    <h2 class="header__main__text--small">IS WHERE LIFE HAPPENS</h2> 
</div>
<div class="header__main__button">
    <a class="header__main__button--link" href="#">DISCOVER OUR TOURS</a>
        <span class="header__main__button--animElement"></span>
     </div>
</div>

_header_main.scss: 

.header__main{
    width:100%;
    text-align: center;
    background: linear-gradient(to bottom,$yellow_green_color -40%, 
$dark_sea_green_color) , url("../../images/background__img.jpg");
    height: 90vh;
    background-position: 50% 50%;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,0% 100%);

    &__text{
        position: relative;
        top: 30%;
        color: $color_white;

        &--big{
            letter-spacing: 1.5rem;
            font-size: 3rem;
            font-weight: normal;
        }

        &--small{
            font-size: 1rem;
            letter-spacing: 0.8rem;
            font-weight: normal;
        }

    }

    &__button{
        position: relative;
        top: 45%;
        display: inline-block;

        &--link{
            position: relative;
            top: 50%;
            display: inline-block;
            text-decoration: none;
            color: $dark_sea_green_color;
            height: 2.8rem;
            width:12.625rem;
            border-radius: 1.5rem;
            background: $color_white;
            font-size: 0.9rem;
        }

        &--animElement{
            position:absolute;
            top:0;
            left:0;
            display: inline-block;
            height: 2.8rem;
            width: 12.625rem;
        }
    }
}

Я ожидаюэто позиция того элемента inline-block header__main__button, который отсутствует только в Chrome .

1 Ответ

0 голосов
/ 12 мая 2019

Это похоже на ошибку Chrome.Однако есть ли конкретная причина относительного позиционирования?Относительное расположение лучше всего использовать для небольших корректировок.В противном случае лучше использовать что-то еще.В этом случае вы также можете использовать более абсолютное позиционирование? 

.header__main {
    width: 100%;
    text-align: center;
    background: linear-gradient(to bottom,#9acd32 -40%,#8fbc8f);
    height: 90vh;
    background-position: 50%;
    clip-path: polygon(0% 0,100% 0,100% 80%,0 100%);
}
.header__main__text {
    position: absolute;
    top: 30%;
    margin: 0 auto;
    left: 0;
    right: 0;
    color: #fff;
}
.header__main__text--big {
    letter-spacing: 1.5rem;
    font-size: 3rem;
    font-weight: 400;
}
.header__main__text--small {
    font-size: 1rem;
    letter-spacing: .8rem;
    font-weight: 400;
}
.header__main__button {
    position: absolute;
    top: 50%;
    margin: 0 auto;
    left: 0;
    right: 0;
    display: inline-block;
}
.header__main__button--link {
    display: inline-block;
    text-decoration: none;
    color: #8fbc8f;
    height: 2.8rem;
    width: 12.625rem;
    border-radius: 1.5rem;
    background: #fff;
    font-size: .9rem;
}
.header__main__button--animElement {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    height: 2.8rem;
    width: 12.625rem;
}
<div class="header__main">
    <div class="header__main__brand"></div>
    <div class="header__main__text">
    <h1 class="header__main__text--big">OUTDOORS</h1>
    <h2 class="header__main__text--small">IS WHERE LIFE HAPPENS</h2> 
</div>
<div class="header__main__button">
    <a class="header__main__button--link" href="#">DISCOVER OUR TOURS</a>
        <span class="header__main__button--animElement"></span>
     </div>
</div>
...