html - 如何在其父容器内放置一个按钮，使其完美地覆盖该容器的边框

Question

我正在尝试重新创建这个组件，该组件由最右上角的一个按钮和一个显示文件名称的标签组成。

为了得到这个结果，我使用按钮的绝对位置，但你可以很容易地看出按钮在它的父级内部而不是在它的顶部

HTML：

<div class="ctrl">
  <div class="upload">
    <label class="upload__file-name">Select a file</label>
    <button type="button" class="upload__choose">
      Browse
    </button>
  </div>
</div>

SCSS：

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  height: 100%;
  font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
  background-color: #562765;
 
}


body {
  box-sizing: border-box;
  height: 100%;
}

.file-input {
  display: none;
}

.ctrl {
  height: 4.8rem;
}

.upload {  
  height: 100%;
  width: 100%;
  background-color: rgba(#F0F0F0, 0.32);
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 23px;
  position: relative;
  &__file-name {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 120%;
    color: rgba(#fff, 0.48);
  }
  &__choose {
    top: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
    border: 0;
    height: 100%;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 40px;

    background: linear-gradient(
        100.77deg,
        rgba(222, 102, 251, 0.4) 0%,
        rgba(222, 102, 251, 0) 53.8%
      ),
      #7036e9;
    box-shadow: 0px 1px 24px -1px rgba(13, 8, 70, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 40px;
  }
}

这是我使用的 HTML + CSS (Sass)的代码笔。

有什么办法可以让按钮看起来像放在容器顶部一样？换句话说，如何将按钮的顶部、右侧和底部边框与其父容器对齐？

谢谢。

标签： htmlcsssass

Answer 1

因此，您可以在下面的代码片段中看到，container以及按钮，border-radiusis40px和paddingis 15px。

所以两者都会相应地工作。

由于按钮是position: absolute，因此我已将其与输入的最右侧对齐。由于上述原因，两个元素具有相同的高度，按钮也将覆盖整个输入区域。

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.container {
  position: relative;
  margin: 20px;
  display: inline-block;
}

.container input {
  border: 1px solid #ddd;
  outline: none;
  box-sizing: border-box;
  border-radius: 40px;
  padding: 15px;
  position: relative;
}
.container button {
  position: absolute;
  right: 0;
  background: linear-gradient(
        100.77deg,
        rgba(222, 102, 251, 0.4) 0%,
        rgba(222, 102, 251, 0) 53.8%
      ),
      #7036e9;
  border-radius: 40px;
  color: #fff;
  padding: 15px;
  border: 1px solid #7036e9;
}

<div class='container'>
  <input type="text" />
  <button>Explorer</button>
</div>