Question

我的页面上有一个按钮，我想将背景图像应用到。

如果我有以下代码，则不适用。任何人都可以解释原因吗？

.form-file-upload .close {
  display: block;
  position: absolute;
  top: -13px;
  right: -13px;
  width: 26px;
  height: 26px;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  z-index: 3;
  border: 0;
  background: url(http://placehold.it/26x26) 0 0 no-repeat;
}

<div class="form-file-upload">
  <button type="button" class="close"></button>
</div>

Answer 1

您已使用command not found: n，top:-13px和right:-13px属性隐藏了按钮。将按钮放在左上角，以查看是否应用了背景：

＆＃13;

position:absolute

＆＃13;

.form-file-upload .close {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  z-index: 3;
  border: 0;
  background: url("http://placehold.it/26x26") 0 0 no-repeat;
}

＆＃13;

Answer 2

尝试使用此功能，您需要将position:relative;设置为父div

＆＃13;

.form-file-upload {
   position:relative;
}
.form-file-upload .close {
   display:block;
   position: absolute;
   top: 0px;
   right: 0px;
   width: 26px;
   height: 26px;
   font-size: 18px;
   text-align: center;
   line-height: 26px;
   z-index: 3;
   border: 0;
   background: url(http://placehold.it/26x26) 0 0 no-repeat;
}

＆＃13;

<div class="form-file-upload">
   <button type="button" class="close"></button>
</div>

＆＃13;

Answer 3

.form-file-upload .close {
    float: right;
    width: 26px;
    height: 26px;
    font-size: 18px;
    text-align: center;
    line-height: 26px;
    z-index: 3;
    border: 0;
    background: url(http://placehold.it/26x26) 0 0 no-repeat;
}

<div class="form-file-upload">

<button type="button" class="close"></button>

</div>

您的按钮工作正常，但由于位置不显示

top: -13px;
right: -13px;

您可以使用

float: right;

如果你想要在右边。

Answer 4

它显示在小提琴的右上角。

您正在使用top: -13px;和right: -13px;。如果您希望按钮显示在右上角，则应将其设置为0。

顶

当position设置为absolute或fixed时，top属性指定元素的上边缘与其包含块的上边缘之间的距离。 source

右：

当position设置为absolute或fixed时，right属性指定元素的右边缘和其包含块的右边缘之间的距离。 source

所以使用-13px会将其呈现为top规则的屏幕的一半，并会溢出到right规则的屏幕右侧

Answer 5

它显示在顶部＆amp;对〜不隐藏:) 通常，设定时 position: absolute， left & top will always be set 绝对位置将检查其第一个相对（或绝对）父母; 如果添加

 .form-file-upload {
  position: relative;
}

你会有一些改变〜

为什么我的背景图片没有显示？

5 个答案: