how to make a div float over another div

Question

how to make a div float over another div

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm trying to make an interface similar to that of whatsapp web which has a green header and a gray background where the chat box is contained on this gray background and the green header. The only way I can think of how this was done is by using divs. Assuming the green header and gray background are divs, and the box containing the conversations is another div, how do I make that div of the conversations overlap with the other divs?

What I have is this:

AndwhatIwantisthis:

html css

asked by anonymous 25.09.2016 / 00:58

2 answers

1

You can use position: relative; with top negative and margin: 0 auto; to align the middle to orange div

html, body {
    padding: 0;
    margin: 0;
}

.topo {
    background: #000;
    height: 48px;
}

.laranja {
    position: relative;
    background: #fc0;
    width: 400px; /* ajuste a largura */
    height: 500px; /* ajuste a altura */
    margin: 0 auto; /* alinha a div no centro */
    top: -35px; /*CONTROLE AQUI A DISTANCIA*/
}

<div class="topo">

</div>

<div class="laranja">

</div>

25.09.2016 / 01:24

Parameter passing from one fragment to another NameError: name [name] is not defined

score 2 · Accepted Answer

I think it's more or less what you want ... (I copied some details from the web.whatsapp)

.f {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: gray;
}
.b {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 20%;
  width: 100%;
  background-color: black;
}
.w {
  position: relative;
  width: 80%;
  height: calc(100% - 38px);
  margin: 0 auto;
  top: 19px;
  border-radius: 3px;
  background-color: orange;
}

<div class='f'>
  <span class='b'></span>
  <div class='w'></div>
</div>