StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is another way of doing it which may be more versatile.</p> <p>Create a block level container with two child elements, one for the image and one for the text area:</p> <pre><code><div class="textpanel"> <img src="http://placekitten.com/300/300"> <textarea>some text area text...</textarea> </div> </code></pre> <p>Apply the following <strong>CSS</strong>:</p> <pre class="lang-css prettyprint-override"><code>.textpanel { position: relative; } .textpanel img { display: block; } .textpanel textarea { position: absolute; top: 50px; left: 50px; height: 200px; width: 200px; background-color: rgba(255,255,255,0.5); } </code></pre> <p>Set <code>position: relative</code> on the parent container and then use <code>position: absolute</code> to place the the <code>textarea</code> over the image.</p> <p>You can use <code>rgba</code> to control the opacity of <code>textarea</code> or you can fade the image using your method of choice.</p> <p>You can also try styling the border to the <code>textarea</code> as needed.</p> <p>Demo fiddle: <a href="http://jsfiddle.net/audetwebdesign/ygMZ6/" rel="nofollow">http://jsfiddle.net/audetwebdesign/ygMZ6/</a></p> <h2>How This Works</h2> <p>Setting <code>position: relative</code> on <code>.textpanel</code> simply sets a reference for any absolutely positioned child elements.</p> <p>Setting <code>position: absolute</code> on <code>textarea</code> allows for vertical and horizontal positioning. A new stacking order is created which is why the textarea appears overlying the image, which is still in the root level stacking order.</p> <p>In this case, no need to use <code>z-index</code> to alter the stacking order of any elements.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload