Ethan Ethan - 2 months ago 13
HTML Question

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

I have no idea how/why this is happening... But I've been re-building an interface from scratch since the old one was hacky and unreliable.

Anyway, I have divs which are acting as "buttons." The gradient background I've got assigned to them wasn't working, then I stumbled across an interesting behavior... The background DOES display if I make the position attribute absolute, rather than relative.

Here are my examples:
1) Absolute positioning
2) Relative positioning

The sections in question (css wise) are here:

.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;
}


Any thoughts on why this is happening, and more importantly how I can go about fixing it?

Thanks!

Answer

The position: absolute; for the following class .verticalCenter hides the color behind the gray div, change it to folowing code,It works here

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