css - HTML : Div on Image -


i have following html. how can dragdiv shown on top of image?

<div id="pnlcontainer" class="container">     <img id="cropbox" src='1.jpg' />     <div class="dragdiv" id="dragdiv">     </div> </div>  .dragdiv {     width:400px;     background-color:transparent;     border:2px solid #cccccc;     position:relative;     left:20px;     top:20px;     padding:0px;     margin:0px;     height:50px; } 

currently, you're moving dragdiv down , away image. if change code -20px , -20px on .dragdiv css, on image.

or, give "pnlcontainer" relative positioning, absolutely position both "dragdiv", , "cropbox" - shouldn't need z-index - positioning, div appear on image in case.

either way fine. bottom line - positioning them correctly in case div on image.

<style type="text/css">     #pnlcontainer {         position: relative;         }      #dragdiv {         position: absolute;         top: 0px;         left: 0px;         width:400px;         background-color: transparent;         border:2px solid #cccccc;         position:relative;         left:20px;         top:20px;         padding:0px;         margin:0px;         height:50px;         }     #cropbox {         position: absolute;         top: 0px;         left: 0px;         } </style> 

Comments

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -