css 如何阻止我的按钮越过导航栏？

oo7oh9g9 于 2023-04-08 发布在其他

关注(0)|答案(4)|浏览(110)

我所面临的问题是，我的按钮是去我的导航栏的错误，我担心的是位置：绝对的选择，但我无法得到任何替代把我的按钮在图像的中心。
这只是一个简单的HTML按钮：

<section class="home">
            <img src="assets/Front_Cover.png" alt="" class="home-image-img">
            <button class="home-button">Get Started</button>

        </section>

CSS：

.home-button {
    position: absolute;
    bottom: 47%;
    left: 47%;
    padding: 10px;
    background-color: #195154;
    color: white;
    border: 0px;
    border-radius: 6px;
    transition: all 0.2s ease 0s;
}

Problem

css

来源：https://stackoverflow.com/questions/66277925/how-to-stop-my-button-going-over-the-navbar

4条答案

按热度按时间

tf7tbtn21#

这会有用的

.home{
  position: relative
}
.home-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
    padding: 10px;
    background-color: #195154;
    color: white;
    border: 0px;
    border-radius: 6px;
    transition: all 0.2s ease 0s;
}

赞(0）回复(0）举报 2023-04-08

xienkqul2#

这就是问题所在如果一个元素有属性position: absolute;，那么这个元素可以出现在其他元素的顶部。你可以尝试调整“top”和“left”属性，把按钮放在你想要的位置。记住，通过设置position: absolute;，你可以把这个元素放在父元素里面你想要的任何地方（在你的例子中）
另一个解决方案是移动navBar。

赞(0）回复(0）举报 2023-04-08

kiayqfof3#

使用position:relative;而不是position: absolute;
具有位置的元素：相对的;相对于其正常位置定位。
设置相对位置元素的top、right、bottom和left属性将使其从正常位置调整。其他内容将不会调整以适应元素留下的任何间隙。sourcew3schools.com

赞(0）回复(0）举报 2023-04-08

hs1rzwqc4#

尝试添加z-index：1;在你的导航栏里，也许能解决问题

赞(0）回复(0）举报 2023-04-08