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

Question

我不知道 how/why 这正在发生...但是我一直在从头开始重新构建一个界面，因为旧的界面不可靠且不可靠。

无论如何，我有 div 作为 "buttons." 我分配给它们的渐变背景不起作用，然后我偶然发现了一个有趣的行为......如果我使位置属性成为绝对的，而不是相对的。

这是我的例子： 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

下面class.verticalCenter的position: absolute;隐藏了灰色后面的颜色div，改成下面的代码，就可以了here

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

Answer 2

第一期是，

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

只需将其更改为，

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

因为如果您对子元素使用百分比 height 值。您必须为父包装器提供固定高度。否则它不会像你期望的那样工作。

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

下一期是，

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

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

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

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

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

Background-Color not applying to relative objects, but will to absolute positioning

html

css

background

position