How to make div go behind another div

Question

I am trying to make the  box-left-mini  go in front of the div which is below    lt div class  box-left-mini  gt     this div is infront      lt div style  background-image url  images hotcampaigns campaign-sample png  height 100px width 100px   gt          this div is behind      lt  div gt   lt  div gt    The CSS for box-left-mini is    box-left-mini       float left      background-image url website-content hotcampaign png       width 292px      height 141px

User · Answer

One possible could be like this   HTML   lt div class  box-left-mini  gt       lt div class  front  gt this div is infront lt  div gt       lt div class  behind  gt          this div is behind      lt  div gt   lt  div gt    CSS   box-left-mini  float left  background-image url website-content hotcampaign png   width 292px  height 141px     front      background-color lightgreen     behind      background-color grey      position absolute      width 100       height 100       top 0      z-index -1      http   jsfiddle net MgtWS   But it really depends on the layout of your div elements i e  if they are floating  or absolute positioned etc

User · Answer

To answer the question in a general manner   Using z-index will allow you to control this  see z-index at csstricks   The element of higher z-index will be displayed on top of elements of lower z-index   For instance  take the following HTML    lt div id  first  gt first lt  div gt   lt div id  second  gt second lt  div gt    If I have the following CSS    first       position  fixed      z-index  2      second       position  fixed      z-index  1       first wil be on top of  second   But specifically in your case   The div element is a child of the div that you wish to put in front  This is not logically possible

User · Answer

You need to add z-index to the divs  with a positive number for the top div and negative for the div below  example

User · Answer

http   jsfiddle net f2znvn4f     HTML   lt div class  box-left-mini  gt       lt div class  front  gt  lt span gt this is in front lt  span gt  lt  div gt       lt div class  behind container  gt           lt div class  behind  gt behind lt  div gt               lt  div gt   lt  div gt      CSS   box-left-mini      float left      background-image url website-content hotcampaign png       width 292px      height 141px      box-left-mini  front       display  block      z-index  5      position  relative     box-left-mini  front span       background   fff     box-left-mini  behind container       background-color   ff0      position  relative      top  -18px     box-left-mini  behind       display  block      z-index  3        The reason you re getting so many different answers is because you ve not explained what you want to do exactly  All the answers you get with code will be programmatically correct  but it s all down to what you want to achieve

User · Answer

container can not come front to inner container  but try this below    Css   ----------------------  container   position relative         div1   width 100px  height 100px  background  9C3  position absolute               z-index 1000  left 50px  top 50px         div2   width 200px  height 200px  background  900     HTMl    -----------------------  lt div class  container  gt       lt div class  div1  gt         Div1 content here                lt  div gt       lt div class  div2  gt         Div2 contenet here                lt  div gt   lt  div gt

[html] How to make div go behind another div?

Examples related to html

Examples related to css