Question

我目前正在设计一个网站，其顶部有一个图像，位置为：相对文字位于顶部，即position：absolute。

当我尝试添加边框时，请联系＆＃39;由于其相对于图像的位置，它在底部有一个间隙。我该怎么做才能让边框四处走动＆＃39;联系＆＃39;？

代码：

HTML：

<main>
    <div class="relative">
        <img id="headerImage" src="http://www.yugangliang.com/Library/DHTML/Gal_JJP/Photos/Joseph_Johnson_VA_Richmond_Elevated_RR_View_2100x802.jpg" alt="bridge"/>
        <p class="absolute-text" id="fontStyle">HAPPY NATIONAL PI DAY + 0.01.</p>
        <a class="absolute-text" id="fontStyle2" href="contact.html">CONTACT</a>
    </div>
</main>

CSS：

    #headerImage {
    width: 100%;
    height: 600px;
}

.relative{ 
    position:relative; 
    width:100%;
}

.absolute-text {
    color: white;
    position:absolute; 
    bottom:0;  
    /*padding:220px 20px;*/
    top: 150px;
    width:100%; 
    text-align:center;
    font-family: 'Roboto', sans-serif;
}   

#fontStyle {
    font-weight: 900;
    font-size: 64px;
}

#fontStyle2 {
    font-size: 25px;
    /*border: 2px solid #fff !important;*/
    text-decoration: none;
    font-weight: 400;
    top: 290px;
    /*padding-top: 155px;*/
}

Answer 1

尝试以这种方式设置#fontStyle2 CSS规则：

#fontStyle2 {
    font-size: 25px;
    border: 2px solid #fff !important;
    text-decoration: none;
    font-weight: 400;
    top: 290px;
    width: auto;
    left: 50%;
    height: 30px;
    padding: 0 10px;
    transform: translateX(-50%);
}

将边框添加到位置相对图像上绝对位置的文本

1 个答案: