背景颜色不适用于相对对象，但适用于绝对定位

Question

我不知道这是如何/为什么会发生...但是我一直在从头开始重新构建一个界面，因为旧界面既老套又不可靠。

无论如何，我有充当“按钮”的 div。我分配给他们的渐变背景不起作用，然后我偶然发现了一个有趣的行为......如果我将位置属性设为绝对而不是相对，则背景会显示。

这是我的例子： 1)Absolute positioning 2)Relative positioning

有问题的部分（css 明智）在这里：

.banner > .button {
position: relative;
top: 10;
display: inline-block;
height: 85%;
min-width: 80px;
margin-top: auto;
margin-bottom: auto;
text-align: center;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.banner > .button > span {
    left: 30%;
}
.blueGlass {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100&0.48+0,0.58+100 */
    background: -moz-linear-gradient(top,  rgba(59,103,158,0.48) 0%, rgba(43,136,217,0.53) 50%, rgba(32,124,202,0.53) 51%, rgba(125,185,232,0.58) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a3b679e', endColorstr='#947db9e8',GradientType=0 ); /* IE6-9 */
    color: white;
}
.blueGlass:hover {
    -webkit-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    -moz-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    cursor: pointer;
}

关于为什么会发生这种情况的任何想法，更重要的是我可以如何解决它？

谢谢！

Answer 1

第一个问题是，

.banner {
    ...
    min-height: 40px;
}

只需将其更改为，

.banner {
    ...
    height: 40px;
}

因为如果您对子元素使用百分比height 值。您必须为父包装器提供固定高度。否则它将无法按预期工作。

查看示例：https://jsfiddle.net/23qp2j8b/4/

---

下一个问题是，

删除跨度中的verticalCenter。并将这些样式添加到button > span，

.banner > .button > span {
    ...
    padding: 6px 15px;
    display: block;
}

完整的修复示例：https://jsfiddle.net/23qp2j8b/5/

希望这是您所需要的！ ;)

Answer 2

下面类.verticalCenter的position: absolute;隐藏了灰色div后面的颜色，将其更改为以下代码，它可以工作here

.verticalCenter {
  position: relative;
  top: 60%;
}