Question

我试图创建一个页面，并使用相对定位来使标题header__main__button中的按钮header__main居中（顶部：45％），但是在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;
        }
    }
}

我希望它位于仅在 Chrome 中不会发生的内嵌header__main__button元素的位置。

Answer 1

这似乎是一个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>

相对定位在chrome中具有block子元素，但不适用于inline-block或inline子元素

1 个答案: