我的页面上有一个按钮,我想将背景图像应用到。
如果我有以下代码,则不适用。任何人都可以解释原因吗?
演示:https://jsfiddle.net/p7octep1/
.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>
答案 0 :(得分:4)
您已使用command not found: n
,top:-13px
和right:-13px
属性隐藏了按钮。将按钮放在左上角,以查看是否应用了背景:
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;
答案 1 :(得分:1)
尝试使用此功能,您需要将position:relative;
设置为父div
.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;
答案 2 :(得分:1)
.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;
如果你想要在右边。
答案 3 :(得分:0)
它显示在小提琴的右上角。
您正在使用top: -13px;
和right: -13px;
。如果您希望按钮显示在右上角,则应将其设置为0
。
顶
当position设置为absolute或fixed时,top属性指定元素的上边缘与其包含块的上边缘之间的距离。 source
右:
当position设置为absolute或fixed时,right属性指定元素的右边缘和其包含块的右边缘之间的距离。 source
所以使用-13px
会将其呈现为top
规则的屏幕的一半,并会溢出到right
规则的屏幕右侧
答案 4 :(得分:0)
它显示在顶部&amp;对〜不隐藏:)
通常,设定时
position: absolute
,
left & top will always be set
绝对位置将检查其第一个相对(或绝对)父母;
如果添加
.form-file-upload {
position: relative;
}
你会有一些改变〜