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
Post a Comment