HTML-覆盖图像的一行按钮_Html_Css

HTML-覆盖图像的一行按钮

html css

HTML-覆盖图像的一行按钮,html,css,Html,Css,我有一个256x64的图像，我想在上面覆盖一行4个按钮。 jsfiddle： * { 保证金：0；填充：0；边框样式：实心； } .侧边栏{ 文本对齐：居中；最大宽度：100%；对齐项目：居中；填充：10px； } .集装箱{ 宽度：256px；显示：内联块； } .按钮{ 显示：网格；网格模板列：25%25%25%25%； } 1. 2. 3. 4. 我目前的问题是，我找不到一种方法将按钮放在图像上，反之亦然，只要你点击按钮，点击事件就会发生。如果有更好的完全不同的方法，只要

我有一个256x64的图像，我想在上面覆盖一行4个按钮。
jsfiddle：


* {
保证金：0；
填充：0；
边框样式：实心；
}
.侧边栏{
文本对齐：居中；
最大宽度：100%；
对齐项目：居中；
填充：10px；
}
.集装箱{
宽度：256px；
显示：内联块；
}
.按钮{
显示：网格；
网格模板列：25%25%25%25%；
}
1.
2.
3.
4.

我目前的问题是，我找不到一种方法将按钮放在图像上，反之亦然，只要你点击按钮，点击事件就会发生。如果有更好的完全不同的方法，只要它有效，我不介意。按钮需要排成一行，彼此相邻，一个对应于图像中的每个插槽。提前谢谢

你可以试试这样的东西

*{
保证金：0；
填充：0；
边框样式：实心；
}
.侧边栏{
显示器：flex；
证明内容：中心；
文本对齐：居中；
最大宽度：100%；
对齐项目：居中；
填充：10px；
}
.集装箱{
位置：相对位置；
宽度：256px；
显示器：flex
}
.按钮{
显示：网格；
网格模板列：25%25%25%25%；
位置：绝对位置；
宽度：242px；
高度：50px；
左：7px；
顶部：7px；
}


1.
2.
3.
4.

在这种情况下，我宁愿在按钮上使用相对定位。

我已将顶部和左侧更改为0px，并制作了256和64号，工作方式与需要的完全相同，谢谢您。祝你好运

<html>

  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
        border-style: solid;
      }
      .sidebar {
        text-align: center;
        max-width: 100%;
        align-items: center;
        padding: 10px;
      }
      .container {
        width: 256px;
        display: inline-block;
      }
      .buttons {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
      }
    </style>
  </head>

  <body>
    <div class="sidebar">
      <div class="container">
        <img src="https://i.imgur.com/ynrCcsx.png">
        <div class="buttons">
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button>4</button>
        </div>
      </div>
    </div>
  </body>
</html>