Question

我为一家新公司设计了一个网页，并且标题很完美，除了我们还没有标识，所以我把它放在了原位。现在我替换了它，但它下面的号召性用语按钮已被推离屏幕。我知道有数以百万计的关于互联网定位的教程，但我严重陷入困境！

<body>
<header>
   <nav>
       <div class="row">
            <ul class="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Quote</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
       </div>
   </nav>
    <div class="hero-text-box">
       <img src="img/test.png" width="500px" height="500px" alt="test">
       <a class="btn" href="#">Get a Quick Quote</a>
    </div>
</header>

header {
background-image: url(img/hero2.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}

.hero-text-box {
position: absolute;
width: 1140px;
top: 20%;
left: 60%;
}

Answer 1

有几种定位元素的方法。既然你没有指定你想要按钮的位置，我会假设你想让它居中。一种简单（向后兼容）的方式是：

.button { 
  position: absolute;
  left: 50%;
  width: 50px;
  margin-left: -25px;
}

我们使用负边距的原因是因为定位是左对齐的，这意味着top：0和left：0位于元素的左上角。因此，当我们离开时：50％，如果我们希望元素居中，它会偏移25个像素

确保button元素没有任何具有position属性的父级。如果按钮的父元素具有position属性，则它将相对于该父元素放置button元素。希望这对你有所帮助，干杯。

Answer 2

我认为这样可以解决问题。

.hero-text-box {
    position: absolute;
    width: 100%;
    height:100%
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1;
    top: 0;
    left:0;
}

定位屏幕外的链接（按钮）

2 个答案: