css 使用display时，如何使按钮位于后面< div>：挡？

vof42yt1 于 2023-05-23 发布在其他

关注(0)|答案(1)|浏览(136)

如何使<div>覆盖<button>？我是一名学生，正在学习CSS中的float。当把button变成块级元素时，我想让button放在盒子后面，所以我在button上添加了一个样式，display: block;。我所期望的是按钮在盒子后面，而不是盒子旁边。然而，这并不奏效。
我知道如何修改代码来实现它。但我不明白为什么代码不起作用。

.container {
  width: 1200px;
  height: 300px;
  border: 1px solid black;
}

.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

button {
  display: block;
  border: 1px solid red;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <button>click me</button>
</div>

css

来源：https://stackoverflow.com/questions/76307251/how-can-i-make-a-button-go-behind-a-div-when-using-display-block

1条答案

按热度按时间

m1m5dgzv1#

你的两个盒子有浮动，他们一个接一个地往左走。按钮在后面，所以在侧面
如果将container positionrelative和buttonpositionabsolute放在一起，它将独立于box在container中占据位置
你可以改变值左，右，顶部底部按钮

.container {
  position: relative;
  width: 1200px;
  height: 300px;
  border: 1px solid black;
}

.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

button {
  position: absolute;
  border: 1px solid red;
}

<div class="container">
  <button>click me</button>
  <div class="box"></div>
  <div class="box"></div>
</div>

赞(0）回复(0）举报 2023-05-23

我来回答

css 使用display时，如何使按钮位于后面< div>：挡？

1条答案

相关问题

热门标签

最新问答