Why doesn’t the background-color appear?

Asked

Viewed 1,417 times

1

Well, I have the following code:

body {
  background-image: url("imagens/fundo.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

.container {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  position: relative;
}

.logo {
  position: absolute;
  margin-top: 5%;
}

.bloco2 {
  position: absolute;
  background-color: #ABABAB;
  height: 2%;
  width: 2%;
  margin-top: 20%;
}

.linha1 {
  margin-left: 20%;
  background-color: #ABABAB;
  height: 5%;
  width: 20%;
  margin-top: 2%;
  position: absolute;
}

.online {
  margin-left: 60%;
  margin-top: 0%;
  position: absolute;
}

.jack {
  background-color: #ABABAB;
  height: 5%;
  max-width: 20%;
  margin-left: 80%;
  position: absolute;
}

.loginsteam {
  margin-left: 40%;
  position: absolute;
}

.menu {
  margin-top: 10%;
  position: absolute;
}

.goncalo {
  background-color: green;
  width: 10%;
  height: 5%;
  position: absolute;
}
<header>
  <div class="container">
    <div class="jack">
      Best Jackpot: Goncalo
    </div>
    <div class="online">
      <span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:18px; text-transform: uppercase;">Online:</span>
      <span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:17px; text-transform: uppercase;"><b>20</b></span>
    </div>

    <div class="goncalo">
      Goncalo
    </div>
    <div class="logo">
      <img src="imagens/logo.png">
    </div>

    <div class="menu">
      Oi
    </div>
  </div>
</header>

In the style class .goncalo, the background-color is not appearing when I put position absolute. Why? How can I fix this.

css

  • Me, I was wrong on the :S button I wanted to accept, and I clicked the wrong button, if I could add again thank you.

  • And the incompatibility lies between position: absolute and height relative. When setting the height on px, for example, it works as expected. Still trying to understand why exactly.

  • 'Cause I can see that, but I can’t figure out why.

2 answers

3

Incompatibility occurs between properties position, defined as absolute, height, with relative values. This is because using the property position: absolute you will be removing the element from the natural stream of display, being ignored by the later elements and ignoring properties of your parent element. Having a relative height would only make sense when the value is relative to the property of the parent element, such as the element with position: absolute ignores such properties, it is not possible to have relative values.

This relationship is reestablished if the parent element has position: relative and set an absolute value for the property you want to keep as relative. In this case, simply add a height with absolute value to the .container that it would be possible to maintain the height of .goncalo relative.

Just change the value of the property height to an absolute value, such as 50 px, as in the example below, and you will see that it will work as expected.

body {
  background-image: url("imagens/fundo.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

.container {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  position: relative;
}

.logo {
  position: absolute;
  margin-top: 5%;
}

.bloco2 {
  position: absolute;
  background-color: #ABABAB;
  height: 2%;
  width: 2%;
  margin-top: 20%;
}

.linha1 {
  margin-left: 20%;
  background-color: #ABABAB;
  height: 5%;
  width: 20%;
  margin-top: 2%;
  position: absolute;
}

.online {
  margin-left: 60%;
  margin-top: 0%;
  position: absolute;
}

.jack {
  background-color: #ABABAB;
  height: 5%;
  max-width: 20%;
  margin-left: 80%;
  position: absolute;
}

.loginsteam {
  margin-left: 40%;
  position: absolute;
}

.menu {
  margin-top: 10%;
  position: absolute;
}

.goncalo {
  background-color: green;
  width: 10%;
  height: 50px;
  position: absolute;
}
<header>
  <div class="container">
    <div class="jack">
      Best Jackpot: Goncalo
    </div>
    <div class="online">
      <span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:18px; text-transform: uppercase;">Online:</span>
      <span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:17px; text-transform: uppercase;"><b>20</b></span>
    </div>

    <div class="goncalo">
      Goncalo
    </div>
    <div class="logo">
      <img src="imagens/logo.png">
    </div>

    <div class="menu">
      Oi
    </div>
  </div>
</header>

1


It does not disappear, what happens is that it is without a reference to height when it is at all. You give 20% of nothing in height:20%, for the parent element .container does not have a defined height to serve with reference.

Maybe for what you want you should start by setting a time to .container, for example height: 500px; Here the option depends on what you intend to do, but here is a chance for your code (change your code):

.container {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  position: relative;
  height:  500px;
}

I hope it helps!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.