Question

我在position:absolute容器中有position:relative链接。然而，当我这样做时，它将文本向右倾斜约10-15pxs并使其看起来非常偏离中心。但是，如果我将绝对值更改为相对值，则文本将返回到应该的位置（中心）。为什么位置：绝对这样做，是否有任何修复？我在下面提供了我的代码，任何帮助都会很棒。谢谢！

给我带来麻烦的文字是：

        <div class="green select">

            <p><a class="button" href="links/calculator.html">Discover</a></p>

        </div>

    </div>

以下是我的其余HTML：

    <div class="headerContent">

        <nav>

            <ul class="navDown">  
                <li><a href="#">Intro</a></li>  
                <li><a href="#windSection">Wind</a></li>  
                <li><a href="#solarSection">Solar</a></li>  
                <li><a href="#nuclearSection">Nuclear</a></li>  
                <li><a href="#endSection">End</a></li>     
            </ul>

            <a href="#" class="menu-icon"><p class="menu"></p></a>

        </nav>

        <a href="#" class="scrollup">Scroll</a>
        <a href="#windSection" id="scrolldown">Scroll</a>

        <h1 class="title bigTitle">Going Green.</h1>

        <p class="headerText">
            A change is coming- and that change will be making the switch to green forms of energy.  If you are interested in learning how you can help the environment and save money over time- you have come to the right place. It is time to Energize Change.  <br><span class="emphasis">Click below to find the perfect green energy source for you and your family!</span>
        </p>

        <img class="people" src="images/peoplesSad.png" />

        <p class= "noElechouse"></p>

        <div class="green select">

            <p><a class="button" href="links/calculator.html">Discover</a></p>

        </div>

    </div>

CSS：

.headerContent {
    position:relative;
    width:55%;
    margin:auto;
    height:100%;
    text-align:center;

}

.title {
    font-family: 'Oxygen', sans-serif;
    font-weight:700;
    color:white;
    font-size:90px;
    padding-bottom:15px;
}

.headerText {
    position:absolute;
    bottom:35%;
    font-family: 'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:27px;
    width:90%;
    margin:auto;
    display:block;
    left:0;
    right:0;
}

.select a {
    position:absolute;
    font-family: 'Oxygen', sans-serif;
    font-weight:normal;
    top:225px;
    font-size:25px;
    color:white;
    text-decoration:none;
    width:110px;
    padding-top:5px;
    padding-bottom:5px;
    margin:auto;
}

.select a::before,
.select a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    content: '';
    opacity:0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}

.select a::after {
    border-color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-7px) translateX(6px);
    -moz-transform: translateY(-7px) translateX(6px);
    transform: translateY(-7px) translateX(6px);
}

.select a:hover::before,
.select a:focus::before {
    opacity: 0;
    -webkit-transform: translateY(5px) translateX(-5px);
    -moz-transform: translateY(5px) translateX(-5px);
    transform: translateY(5px) translateX(-5px);
}

.select a:hover::after,
.select a:focus::after  {
    opacity: 1;
    -webkit-transform: translateY(0px) translateX(0px);
    -moz-transform: translateY(0px) translateX(0px);
    transform: translateY(0px) translateX(0px);
}

Answer 1

添加

.select a
{
    left:0;
    right:0;
}

老实说，我不明白为什么你一心想要绝对定位你的链接。 Fiddle

Answer 2

包含块，它是第一个没有position：static的祖先元素。如果没有这样的祖先，则该元素用作包含块。

你可以这样做

添加

.relative {position: relative !important}

并将其附加到

<a class="button relative" href="links/calculator.html">Discover</a>

位置绝对导致文本向右倾斜

2 个答案: