Floating Div Over An Image

Question

I m having trouble floating a div over an image  Here is what I am trying to accomplish     x000D   x000D       container   x000D         border  1px solid  DDDDDD  x000D         width  200px  x000D         height  200px  x000D        x000D       tag   x000D         float  left  x000D         position  relative  x000D         left  0px  x000D         top  0px  x000D         z-index  1000  x000D         background-color   92AD40  x000D         padding  5px  x000D         color   FFFFFF  x000D         font-weight  bold  x000D        x000D       lt div class  container  gt  x000D          lt div class  tag  gt Featured lt  div gt  x000D          lt img src  http   www placehold it 200x200  gt  x000D       lt  div gt  x000D   x000D   x000D    In this image     I want the  Featured  box to float over top of the image but instead it seems to  clear  the float and cause the image to wrap to the next line  as though it was displaying as a block element  Unfortunately  I can t figure out what I am doing wrong  Any ideas

User · Answer

Actually just adding margin-bottom  -20px  to the tag class fixed it right up   http   jsfiddle net dChUR 7   Being block elements  div s naturally have defined borders that they try not to violate  To get them to layer for images  which have no content beside the image because they have no closing tag  you just have to force them to do what they do not want to do  like violate their natural boundaries    container     border  1px solid  DDDDDD    width  200px    height  200px       tag     float  left    position  relative    left  0px    top  0px    background-color  green    z-index  1000    margin-bottom  -20px        Another toue to take would be to create div s using an image as the background  and then place content where ever you like    lt div id  imgContainer  style            background-image  url  foo jpg              background-repeat  no-repeat            background-size  cover            -webkit-background-size  cover            -mox-background-size  cover            -o-background-size  cover   gt     lt div id  theTag  gt BLAH BLAH BLAH lt  div gt   lt  div gt

User · Answer

Change your positioning a bit    container       border  1px solid  DDDDDD      width  200px      height  200px      position relative     tag       float  left      position  absolute      left  0px      top  0px      background-color  green      jsFiddle example  You need to set relative positioning on the container and then absolute on the inner tag div  The inner tag s absolute positioning will be with respect to the outer relatively positioned div  You don t even need the z-index rule on the tag div

User · Answer

Never fails  once I post the question to SO  I get some enlightening  aha  moment and figure it out  The solution    x000D   x000D       container   x000D         border  1px solid  DDDDDD  x000D         width  200px  x000D         height  200px  x000D         position  relative  x000D        x000D       tag   x000D         float  left  x000D         position  absolute  x000D         left  0px  x000D         top  0px  x000D         z-index  1000  x000D         background-color   92AD40  x000D         padding  5px  x000D         color   FFFFFF  x000D         font-weight  bold  x000D        x000D   lt div class  container  gt  x000D          lt div class  tag  gt Featured lt  div gt  x000D          lt img src  http   www placehold it 200x200  gt  x000D   lt  div gt  x000D   x000D   x000D    The key is the container has to be positioned relative and the tag positioned absolute

User · Answer

you might consider using the Relative and Absolute positining         container     position  relative         tag        position  absolute            I have tested it there  also if you want it to change its position use this as its margin    top  20px  left  10px     It will place it 20 pixels from top and 10 pixels from left  but leave this one if not necessary

User · Answer

You ve got the right idea  Looks to me like you just need to change  tag s position relative to position absolute  and add position relative to  container

[html] Floating Div Over An Image

Examples related to html

Examples related to css

Examples related to css-float

Examples related to z-index