html - Stacking div elements within adjusting container -


i having troubles on how structure new widget working on. trying implement geographic map contains hotspots, old school image map. however, various purposes, want accomplish without use of image maps.

so far, have gotten incomplete solution:

http://jsfiddle.net/nielsbuus/fzj8e/1/

html:

<div class="parent">     <!-- i'm container, need expand in height, when children expand, don't overlap elements beneath me. sort of clearing floats -->     <div class="lower">         <!-- contain image. width fixed, height may vary. -->         <img src="http://placekitten.com/300/325" />     </div>     <div class="higher-container">         <div style="top: 20px; left: 30px" class="higher-spot">foo</div>         <div style="top: 80px; left: 50px" class="higher-spot">bar</div>         <div style="top: 85px; left: 70px" class="higher-spot">baz</div>     </div> </div> <div class="successor">   please keep me below of this. </div>

css:

.parent {     background-color: #ccffff;     padding: 20px;     position: relative; }  .lower {     position: absolute;     width: 300px;     background-color: rgba(0,0,0,0.2);     z-index: 0; }  .higher-container {     position: absolute;         background-color: rgba(255,0,0, 0.3); }  .higher-spot {     position: absolute;     width: 25px;     height: 25px;     background-color: rgba(0, 255, 0, 0.5);     z-index: 1px; }  .successor {     font-size: 18px;     font-family: sans-serif; }

the main problem here use of absolutely positioned z-indexed divs. detach rest of layout, causing parent container not expand, thereby placing succeeding elements beneath absolutely positioned elements.

i looking ideas on how stack 2 divs (lower , higher-container) on top of each other , have parent container expand size of lower div.

you need 1 of children absolutely positioned: 1 placed on top (.higher-container). way, .lower taller .higher-container stretch parent container normally, higher-container layers, aboslutely, on top. need add top , left positioning it:

here's jsfiddle: http://jsfiddle.net/rgthree/m6jm8/

.lower {     position: relative;     width: 300px;     background-color: rgba(0,0,0,0.2);     z-index: 0; }  .higher-container {     position: absolute;     top:0px;     left:0px;        z-index:1;     background-color: rgba(255,0,0, 0.3); }

Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more