Search code examples
htmlcssposition

Why does the green container appear below the red container?

In this code, I think div1 should be floating above div2. Because div1 is applied float:left attribute. But the result is that div2 is floating above div1. Why?

div {
    width:100px;
    height:100px;
    border:1px solid gray;
    font-size:0.7em;
}

.blue {
    background-color: blue;
}
.green {
    background-color: green;
    float:left
}
.red {
    background-color: red;
    position:relative;
    left:10px;
}
<div class="blue"></div>
<div class="green div1"></div>
<div class="red div2"></div>

The result:

enter image description here

Solution

  • The float: left style is used to justify an element to the left. For an element to render above or below another element, you must assign a z-index style; it appears above the other element with the higher z-index style.

    div {
  width:100px;
  height:100px;
  border:1px solid gray;
  font-size:0.7em;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
  float: left;
  z-index: 1;  /* This style has been added. */
}
.red {
  background-color: red;
  position: relative;
  left: 10px;
  z-index: -1; /* This style has been added. */
}
    <div class="blue"></div>
<div class="green"></div>
<div class="red"></div>

    References