StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.</p> <p>You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).</p> <p>Here's the result on <a href="http://jsfiddle.net/b2Awm/1/" rel="nofollow">js-fiddle</a></p> <p>The Html:</p> <pre><code><body> this is the body <img class="my_image" src="images/main_image.jpg" /> <div class="content"> This is the container <a href="#" >Logo</a> </div> </body> </code></pre> <p>CSS:</p> <pre class="lang-css prettyprint-override"><code>body, html { margin: 0; padding: 0; height: 100%; width: 100%; background-color: #000; overflow: hidden; color:silver; } div.content { color:black; background-color: silver; position: relative; width: 1001px; height: 626px; top: 50%; margin: 0 auto; padding: 0; } .my_image { width:160px; height:60px; border:1px solid red; margin: 0; padding: 0; display: block; position: absolute; top: 0; left:0; } div.content a { color:red; font-size:14px; display: inline-block; position: absolute; top: 20%; left: 7%; text-decoration: none; margin: 0; padding: 0; } </code></pre> <p>In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.</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