html - 如何设置按钮在图片边缘的位置？

Question

如何使用 CSS 将按钮定位在图片边缘？

我的代码

<div>

   <button class="" aria-label="Eat cake">Btn</button>                                 
   <img class="pull-left" src="style.png" style="width: 160px; border: 1px solid #DEDEDC;"/>


</div>

问候，

标签： htmlcss

Answer 1

只是在这里给你一个例子，我只是将红色 btn 绝对定位到它的相对父级。

.blue-div{
  margin: 10%;
  position: relative;
  width: 120px;
  height: 120px;
  background: blue;
}

.red-btn{
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  border: none;
  outline: none;
  border-radius: 50%;
  padding: 8px 4px;
  color: white;
}

<div class="blue-div">

<button class="red-btn">Btn</button>

</div>