Html 调整窗口大小时CSS-按钮消失

在我的项目中，我有一个按钮。当我调整浏览器窗口的大小时，当屏幕宽度达到1042px时，按钮会神奇地消失。当它在屏幕上消失时，我检查浏览器中的inspect工具，元素仍然在网页的某个地方，但在屏幕上不可见

HTML:

<div class ="section-1">
<button class="signupBodyBtn">Sign up free, today</button> 
</div>

.section-1 {
    width: 100%;
    position: relative;
    height: 100vh;
    background: url("https://images.paras.com/testimg/10100") no-repeat center center/cover;
}


.signupBodyBtn {
    position: relative;
    z-index: 2;
    top: 263px;
    right: 683px;
    background-color: transparent;
    color: white;
    border-radius: 5px;
    height: 60px;
    width: 220px;
    font-weight: bolder;
    font-size: 18px;
    border: 1px solid white;
}

---

有人知道如何解决这个问题吗？谢谢。

您的按钮正在消失，因为您已将其

位置设置为
相对
，然后将
right
属性设置为大于元素的宽度，使其显示在其父元素的左侧。浏览器将自动剪辑出现在文档上方或左侧的任何内容。这是一个视觉：


红色框是您的按钮，灰色框是父容器。
您可以使用此代码

html

<div class ="section-1">
<button class="signupBodyBtn">Sign up free, today</button> 
</div>

.section-1 {
    width: 100%;
    position: relative;
    height: 100vh;
    background:url("https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg") no-repeat center center/cover;
}


.signupBodyBtn {
    position: relative;
    z-index: 2;
    margin-left: 600px;
  margin-top: 80px;
  background-color: transparent;
    color: white;
    border-radius: 5px;
    height: 60px;
    width: 220px;
    font-weight: bolder;
    font-size: 18px;
    border: 1px solid white;
}

您是否有更多的CSS，可能包含媒体查询？另外，您是否使用过任何CSS框架，比如Bootstrap？是的，它可以j08691@j08691我已经解决了这个问题，并在下面标出了正确答案。是的，我也在使用媒体查询和引导。@coryward，啊，好的。那么你建议做什么来解决这个问题呢？我不知道你想做什么，所以很难为这个问题推荐解决方案。如果删除
right
属性，它将修复此症状。@eweee-您可以尝试使用相对单位，如百分比或其他，而不是固定单位，如像素。或者，当视口变得足够小以至于出现问题时进行媒体查询？@AlexanderNied由于按钮向左对齐，因此
right
属性上的任何值>0都将导致至少部分按钮被剪裁。@coreyward--我的错误--我误解了问题。