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

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;
  }
}

这是我用过的codepen with the HTML + CSS (Sass)。

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

谢谢。

Answer 1

所以你可以在下面的 sn-p 中看到，container 和按钮，border-radius 是 40px 和 padding 是 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>

Answer 2

将position: relative 属性移动到.ctrl 元素选择器以使绝对定位 元素相对 到 its border-box 而不是 upload 元素，它本质上是 的占位符>“输入” 背景。由于它会从常规文档流中取出并绝对放置到 .upload 元素的父元素中，这将使按钮看起来像是在.upload 元素。

如果上传宽度继承其父宽度，您还可以使用上传宽度属性上的计算宽度移除可能显示在按钮下方的任何残留边框，例如width: calc(100% - 2px);

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

html {
  height: 100%;
  font-size: 62.5%;
  background-color: #562765;
}

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

.file-input {
  display: none;
}

.ctrl {
  height: 4.8rem;
  position: relative;
}

.upload {
  height: 100%;
  width: calc(100% - 2px);
  background-color: rgba(240, 240, 240, 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;
}
.upload__file-name {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.48);
}
.upload__choose {
  top: 0;
  right: 0px;
  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;
}

<input type="file" class="file-input">

<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>

Answer 3

I have tried this, you can check

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

html {
  height: 100%;
  font-size: 62.5%;
  background-color: #562765;
}

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

.file-input {
  display: none;
}

.ctrl {
  height: 4.8rem;
}

.upload {
  height: 100%;
  width: 60%;
  margin: 50px auto;
  background-color: rgba(240, 240, 240, 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;
}
.upload__file-name {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.48);
}
.upload__choose {
  top: -1px;
  right: -1px;
  bottom: -1px;
  position: absolute;
  cursor: pointer;
  border: 0;
  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;
}

<input type="file" class="file-input">
<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>