how to make a div float on another div

Asked

Viewed 9,302 times

1

I’m trying to make an interface similar to the Whatsapp web which has a green header and a gray background where the conversations 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 Ivs. Assuming that the green header and gray background are Divs, and that the box containing the conversations is another div, how do I get that div of the conversations to be superimposed on the other Divs?

What I got is this: inserir a descrição da imagem aqui

And what I want is this: inserir a descrição da imagem aqui

html css

  • Any html element can be floated, the div by itself does nothing, so the question is not Divs, but rather how to float anything, the problem is that I did not understand the effect you want, could make a drawing or something like that to explain?

  • edited the question, put 2 pictures there. Orange square is a div and black header is another!

  • but you want the orange DIV to be on top of all the elements, so it’s just a little bit on top of the black div that’s on top?

  • I want her just a little bit over the black part, but I want to control how much.

2 answers

3


I think that’s about what you want... (I copied some details from the web.) 

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

  • That’s right! Thank you!!

1

You can use position: relative; with top negative and the margin: 0 auto; to align in the middle the 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>

Browser other questions tagged html css

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