Databases
StackOverflow2013
Postsdbo
POProblem using z-index on two relatively positioned divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem using z-index on two relatively positioned divs
    text
    copied!<p>I have found a lot of "almost" answers for this question, but nothing to help my specific problem...</p> <p>I have a web page with a centered #content-wrapper that is 1024px wide. What I would like is to have another div positioned behind this wrapper that is also centered and slightly wider - reason being that I have a graphic I want running down the left side of the #content-wrapper, but I need my #content-wrapper to stay 1024px wide. I can't put this graphic in the body background or absolutely position it, because I need it to move along with the #content-wrapper when the browser is resized.</p> <p>So my problem is, I have relatively positioned both the #content-wrapper and the larger div, which is called #prints, and applied z-indexes to both. However, unless I apply absolute positioning to #prints, it acts like a floated element and jumps above my #content-wrapper. I have tried setting the body position to relative, but that doesn't help.</p> <p>I need to know if there's a way to do this, or if I am just frustrating myself trying to do something that won't work?</p> <p>My (simplified) markup is below. HTML:</p> <pre><code>&lt;body&gt; &lt;div id="prints"&gt;&lt;/div&gt; &lt;div id="content-wrapper"&gt; &lt;!-- Content here --&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS:</p> <pre><code>#content-wrapper { width: 1088px; min-height: 800px; height: auto; overflow: hidden; margin: 0px auto 0px auto; position: relative; z-index: 99; } #prints { width: 1212px; position: relative; z-index: -99; margin: 0px auto 0px auto; height: 881px; background-image: url(images/bg-prints.png); } </code></pre>
 

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