Question

我有以下HTML页面结构：

.photos

现在，每个单个图像都显示在photos div中（请参阅echo）。 <style> div在其上没有应用CSS，只有上面显示的样式。

我希望这些按钮显示在<a href='inc/change_dp.php'><input class='update' type='button' value='Make Display Picture' /></a> <a href='inc/delete_photo.php'><input class='delete' type='button' value='Delete' /></a>";：

中指定的右上角和左上角

.photos

按钮应显示在悬停的userposts_panel div内的左上角，右上角。但出于某种原因，按钮出现在#userposts_panel{ margin:0 auto; min-height: 250px; height: auto; text-align:left; position:absolute; left:0px; width: 100%; background-color:#ffffff; border-left: 1px solid #E1E3E4; } div的顶角，它有以下CSS：

{{1}}

不太确定为什么会这样？

Answer 1

要在容器中绝对显示元素，请在容器上使用position:relative;这样，子元素就会知道相对于哪个位置。

＆＃13;

#userposts_panel {
  margin: 0 auto;
  min-height: 250px;
  height: auto;
  text-align: left;
  position: absolute;
  left: 0px;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #E1E3E4;
}
.photos:hover img {
  opacity: 0.5;
}
.photos:hover input {
  display: block;
}
.photos input {
  position: absolute;
  display: none;
}
.photos input.update {
  position: absolute;
  top: 0;
  right: 0;
}
.photos input.delete {
  top: 0;
  left: 0;
}
.photos {
  border: 1px solid red;
  height: 200px;
  width: 200px;
  position:relative; /* added */
}

＆＃13;

<div id="userposts_panel">
  <table>
    <tr>
      <td>
        <div class="photos">
          <a href='#' target='_blank'>
            <img src='#' />
          </a>
          <a href='inc/change_dp.php'>
            <input class='update' type='button' value='Make Display Picture' />
          </a>
          <a href='inc/delete_photo.php'>
            <input class='delete' type='button' value='Delete' />
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>

＆＃13;

顺便说一下，你有一个错误：它不允许<button>放在<a>内。（或者，在另一个交互元素中的任何交互元素。）这将破坏嵌套元素内的用户界面和事件处理。（请注意，它可能会按照您预期的方式使用您测试的浏览器，但这并不意味着它在所有浏览器中的工作方式相同！）

在图像悬停时，按钮没有出现在正确的div中

1 个答案: