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>

此致

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>

Answer 2

不客气。

请记住，每当您需要某些东西来移动它的父对象时，它必须是绝对的，并且它的父对象必须是相对的。

.container{
  position:relative;
  width: 150px;
  margin: 0 auto;
  margin-top: 100px;
}
.container .badge{
  position:absolute;
  top:-25px;
  right:-25px;
}
.container img{
  width:100%;
  height:auto;
}
.badge{
  background-color:red;
  border-radius:50%;
  height:50px;
  width:50px;
  text-align:center;
}

<div class="container">
  <span class="badge"></span>
  <img src="http://via.placeholder.com/150x260"/>
</div>

Answer 3

.round-close {
  border-radius: 50%;
  padding: 4px 6px;
  position: absolute;
  top: 0px;
  left: 155px;
  background-color: #900;
  color: white;
}

<div>
  <button class="round-close" aria-label="Eat cake">x</button>
  <img class="pull-left" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOgAAADZCAMAAAAdUYxCAAABZVBMVEX////qQzU0qFNChfT7vAVsbGxvb29qamo3gPSjv/lycnJra2tmZmbr8v4pefPV1dX09PSIiIjj4+Pd3d3FxcXs7Oy9vb2BgYHLy8u0tLR5eXmSkpL7twCjo6PpMh/w8PAmpUqPj4+tra3pLBfpNyagoKAToT/oJQv629nqPS4zqz7P3fz8wwDW4vz2+/e53MHwhX/g6f2VzKFVs2xTjvVluHiyyfq/0vtbW1tDg/x2v4fj8eZbtXGSy54Up1frSDvpMjjwioTylpDzoZzsW1D2t7P97u3+7cz+5bWs1rX0rKlFrV/J5M7c7d9AiuRzoPY9ksE5nZT0kSA7l682pGg3oYGAwo/4zss7mac/jtLvbyntamHve3T80HD85OP3wr/925jtWjGIr0H4qRVSqk7luRjvbQD8ylv7wS28tS3PtySesThomvb+57v7xUL936FvrUf/+ekAbvP1lx2zyYfwdCkimISdVPSYAAALbklEQVR4nO2d+XvbthmAGUUEE5CNSIkSRcmWdVJW5tqOHaeuj3jxkdZHdrbONiV2dnRN07Rpdv39A0BKpiWClyiDcvD+RB2A8BIfPnyE8zwRBA6Hw+FwOBwOh8PhcDgcDofD4XA4HM5Mol68vDw6OUCcHF2+vHjOejzT4OJov3+n1arV2g61WqvVO1w9WWQ9sgS5OOm3W+1e784YvV67VTs8eMl6hEmwuL+HJMcdXbboLqzOuOvzg72Wr+RQttbev2A92tgsvuq2w1g6rt3+bE7rYr8bajJdqq3D2VO96IeL2THV2crC6mrU2Ryqdl/N0PZ6VIupSVRrR6zHH5Lnh7X4mphafyYm9SjO4hyd1BlISq9ak2piuvusPQJ4vhdh5/Sj1met4sviJFnoOr29FC/Uy0TCdmDaSm1NeNJN0PNO7RVrHxonSc5nmj0/kfk8StZzlbUPjZefiOdFsusztZ5CFI1ez+v4aDY8++HqhF671W3dOez3D/dqXe/jsnR7HoR4XEGSe8+OFofljnpxuX/Y9Tg2S7HnYnAi6rUOTzxKOvWy3xopjlPsKewFabZrz6jl3PODtls1zZ77AQ8svda+6tvBwdWjQO3ZDQ06BhcBgdsKPgRSV1vp9xQO/Y/he6EOC16SrJRqz0vfjNsKXbL22+n2FHzns3sSvqPVbqo9T/wyUSvSGdfltMaYCNm//JrqWZutU3dfPswt/YFm2rpFnkI2m136exJxm3J+msti/uoxqa1Z+cNCKL4nnlmP8G2nOoVG5aM9oTh8R0x7e6zHlihvBqLZ7Nz18O2m9kw2Fm+zVyz912XaPmA9tET5OJd1m/77yrTHemjJ8uGaaHZpblgppLvIiczP2RGWnDLpdmUiQZgbFXX2mds2oV+Ni9pl0i1bocKbcU9SJvXS/tfqqHzvLbr0z9u1h5KC3pO3gS3vx+NXNyDlwUePJUp4E9j0wb1Y/Hb6Ul545SLM3FeBTR/cjcXjG7Dy4Gua6HJg05ii927AyoM3FNHgJRpX9MFn07fy4DVlib4ObhpX9NH0rTygiM69CW4aV5RN2h2rdB3Rr4Obxl2jX0zfyoO3FNHgpBtb9Mn0rTygLNFPR/RjcNO4ovenb+XBJy86xdBlI8ogGbERpW0vPwU3nS1RyuPo3IfgprOVdW++BGQkSjlJyf4c3HS2KiPqY1pw09mqdakP3sEb6Ww9vdCOUkJko9l6HvU4vw67SGfrhIG2kWbfBZ6l/OuBL/cooozOjGhp98enx0EtP/PnC29TVqeAg3/AMMIvTzOnE3Z8nyLKpjDyzkbfZRDWi8k6fkxZomy2UcGrrP/hKRbNbEzU7WeUXMUq6Xos0r/ZnhNO6RNaMkpq3JEZLRn+4XhmMjuTdEuLXFa5SBh59n431ERTuhK/088pkcuopCe4H2B+dHlmMvX4nb6nBC67JXotdn+55pmpb8XtkzahDJeocJV3v8uMEjt4KSuU3S5KcP4Bzg9Px0Qz1nasHinFAorczxMeezTm3LvKCMF/PhznEb3eT3zskXiNw9bbM1YlSJtPxpGLy8B3FE2UkKKbPqaKssy5hP9QPbFpxOh9T/W8+346ww/PskUXRaqRMhJ9PlkdF7lZq/uZRthlHt2lezJ75nbjK5qxwlYOT/zOVx4we0JzseIbvJl6Pcykbq//70sf0TRMqCDs+IqiSV0Pempb3rVQ5vJJuexXKMY/HxHVnTOf9tvnFgn/h7+jTOo95inX4TjQNGNl1rwT8PLxjjVY5Q9/723KfA8dsuGfkAh163T37Pq+un22u265mz78xivzsi6KXCwHexLXupVZ39pdOz5eWzvfOK1b9dEbVK//eXxS05GJbF4EB++Vi4P3xw//OGrK6C8uFAL2mAg8/Pa66QOGJyhe7IZYpuGoZ37jUmV5JObNVmKm1/cZ1l7jhEm9YU2H+8y91OwsLhI0rX9jl0npSkRDkjQl+wzjcyI6W4nlXhS+f/oytZ7o4TRJ02/T65nkflqPdjpx47zIJLNQI5833TyJLFTrnLVGCFasSSc13KkEe5Y3JptUayP1YTvgjPZwcoum02EtZvzWrV3WQ4/I8m4M1bp1PjNRe8XyWsQArtd307130llZDz2tdev0eAZnc8j22mkI17qV2Z3wX2GlgO3jHWv8HOwqXi1rZ232LR3Ojrcy2PbqUIxcW1Zm69jvcHsmWX6xcrx7vrF+iljf2DpfWzmb1dzD4XA4HA6Hw+FwOBwOh8Ph3DKKhcIC6zHcACaQEEYuSpuGURWEQqXiNMpVDJtOcC95oOixxjkphghFSQJQaUZpBDQkKkkDUQkCG0kLaloFUI451IlAv2uUi/kSgFKEG21AIioOREXYmUd0IARGQNOmJAZ9ZRoUFWjPgQrFzfDNxkSlon1VhWIpoG2p6f8fOE0HHUh5+ypnRvj9cVGnFwHAwOBlQmkoGgm6aAdWkhpboqA00nG/zpfRStUbhmbiV+jCmHeCUtCrhtEo2dNOF9UgXoF62Xld1HXSoowaV0kSUMln6H30prt7oYReVcvuVx3nVbGpGdp8nAlxAaFYdW2iJUVRDUkEUISqWsEXQCmQ8VVkAESUVnO+ogUJoOytbirOSi0rm+iTBdRYFFFzrLiJtxf0/oJhd2/bFMjnQK4Q8Rz6CL0hkbTVVNC1CJT5iUSLEoSS60aCiqE0Sk0IYccQK6apiVBybohhlqoKJN5jonJBxegyhPiuKKDkvgUQytWS3pGgpKIfBFhUhJqkke4VfJ/zqONqydTQVxZIipTm9ZIm4hyuKxCaulmBkjmRqVpV0PwpnQVH1NlmDLRTVPFFE4hlfIsV8jN5kazB8e1FVjAAVtVx0ZxkvyxsavkrUXvcJsAhgG8FiYkc2QWaQCZhZG6i7gxn1WtSlJ3ei3wTomm1gw2JEj08EntfVyVAYsaZdB0oRS9RHF0ovmAjPy6qA9tCwDfzakbtb0C8qHVRdroygZIX5oFkv1LJFxrD64kpVFHMNImoVLDtyWKzR2KrF3XT1PMLEh7SmCjQcxgdrbncmCiKS6Mw+KmBqOjcuQ4EqKREs0ZiX83j2dclWB3mHrQ1R9n5AlXRnOaxqKK6xoOpENGFhiLKkqQYUPQSHWbdCl6Ho2u0idacrJkFt+igxTwA+GZCxQYVkyiANBlKoFoiX1lAlaVS6ehJydr5kiaKchaodJodQwoQLciiPiaKqn4FZ+xK3iVadImKKCMOUPB9RZGF/TSy4jsKzviRivFx8sO9hYQoTbSB4scZub+ooKD7NSaKA7+DtixX1r0mCsDY3pEvVeVh5Zwj+XgCU7WiDHN2xU9UGuQONGO+oqidiUWdbq9VXqaIboKnqOZdT1WhNHzuW6hAJb4oXlLOD+b9QleVoHPLGwGh2yFjU5wEhvtHO0rTqb5wSvcULYGBUR6X/PmqHRALODPlDPubdr6PC9q3ABljseKbjACE5P152VdURZ/judGgnbybIhatSvbeXMQ7lacoihiR9KBWwKYqQCcOcG4ubjrx24HKJPmoiWK/YZpoe5HxbaeJohEDs1yqyJSsC+0nb/QALxbt+yfPl/WGZGBRdJtQ8ZUzAb6X3qKogdTRy030FZ3USVIzl2vKeC830SZfypWrAFQn8EQRIdlnA3ZSK0mbjqgyOPGAMt6wGxKuCWQDvY9FZXSXC+QSU1acAwagNOzmHQV/XdHyikJqXVS6osyJu7Q7LpP3yTclUhyU0TBQwQHsuiXnvCITa6LeZRHIkz6vq6YGgNa0s2/BdDZn1TSdPb5kEuMy+pZRwu8XnfeK5BKTN0s2+nAVlRsQaLqwYJqk45KGtifypII6yOMWgyKgbJpXwxg+zKhNA71yHtHznYoIG2xOmjgcDofD4XA4HA6Hw+FwOBwOh8PhcD5N/g/J5V5dJz1eXQAAAABJRU5ErkJggg=="
    style="width: 160px; border: 1px solid #DEDEDC;" />
</div>

Answer 4

我总是这样做：

.block { 
  margin: 20px;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #0ff;
  font-size: 0;
}
.badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  text-align: center;
  background-color: #f00;
  transform: translate(50%, -50%);
 }
 img{
  width: 100%;
  height: 100%;
 }

<div class="block">
  <div class="badge">X</div>
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg">
</div>

Answer 5

button {
  position: absolute;
  top: -5px;
  right: -5px;
}

.wrapper {
  position: relative;
}

button {
  position: absolute;
  top: -5px;
  right: -5px;
}

<div class="wrapper">
  <button></button>
  <img />
</div>

Answer 6

这是一个简单的解决方案！使用相对位置/绝对位置。您给父亲元素：position:relative 子position:absolute和一些值（如（位置））：top，left，right，bottom 对于您的情况，您必须指定 top：margin 和 left：margin +图片宽度 我为您添加了一个代码段。我希望你能理解。

img {
    position: relative;
    margin:50px;
}

button {
    position: absolute;
    left: 210px;
    top:50px;
}

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

您可以在此处了解更多信息：https://www.w3schools.com/cssref/pr_class_position.asp

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

6 个答案: