You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
3.1 KiB
56 lines
3.1 KiB
4 years ago
|
<p>When you use Photoshop--or any visual editing software--you have the concept of "layers". If your page is A4 size, and you create 10 layers, then it has 10 A4 sized invisible sheets stacked on top of each other. It's a simple concept that's so simple it's weird to explain it, and yet the browser does not have this essential concept needed for advanced compositing.</p>
|
||
|
|
|
||
|
|
<p>To accomplish the same thing in CSS you have to follow this process:</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li>Create an outer box that is set to <b>position: relative</b> or any position that's not <b>static</b>.</li>
|
||
|
|
<li>Create an inner box that's set to <b>position: absolute</b>.</li>
|
||
|
|
<li>Set this inner box (the bottom layer) to <b>top</b>, <b>bottom</b>, <b>left</b>, <b>right</b> all to <b>0</b>, which sticks the layer's dimensions to the same as the outer box.</li>
|
||
|
|
<li>Place your next layer on this like normal by putting it inside the outerbox.</li>
|
||
|
|
<li>Use the <b>z-index:</b> to alter the layers' ordering if the natural ordering isn't correct.</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<p>The secret that nobody tells you is <b>position:absolute</b> has a footgun which makes it behave differently depending on its outer box. If your outer box doesn't have a position set then your attempt to use <b>position:absolute</b> will cover the entire browser window, <b>but</b> if the outer box is given any other position setting <em>then</em> the <b>position:absolute</b> will cover the outer box.</p>
|
||
|
|
|
||
|
|
<p>So the next time a CSS guru says to you, "just use position:absolute", you can fire back a strategically placed sniper shot of, "Don't you mean use position:absolute inside another box set to position:relative or did you not know that?"</p>
|
||
|
|
|
||
|
|
<h2>Using Named Grid Cells</h2>
|
||
|
|
<p>The most important thing about this demo is using <b>named grid cells</b> using <b>grid-template-areas:</b> in the grid, and then using <b>grid-area:</b> in each element you want in the cell. First, I set the <b>overlay</b>:
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
<code class="language-css">
|
||
|
|
overlay {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2,1fr);
|
||
|
|
grid-template-rows: auto;
|
||
|
|
grid-template-areas:
|
||
|
|
"topleft topright"
|
||
|
|
"middle middle"
|
||
|
|
"bottomleft bottomright";
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
<p>You name the areas using <b>"name name name"</b> for each column, and you can set a cell empty using the dot (.) as a name. In the above example I have <b>"topleft topright"</b> for the first row, <b>"middle middle"</b> for the second row, and <b>"bottomleft bottomright"</b> for the last row. You'll also notice I used "middle middle" so that when I use that name it will cover <b>both</b> grid cells.</p>
|
||
|
|
|
||
|
|
<p>Once I have this setup I just have to give each cell a name. Here's the relevant part of the code from the demo:</p>
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
<code class="language-css">
|
||
|
|
one {
|
||
|
|
grid-area: topright;
|
||
|
|
}
|
||
|
|
|
||
|
|
two {
|
||
|
|
grid-area: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
three {
|
||
|
|
grid-area: bottomleft;
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
<p>Make sure you see how these are mapping from the original source so you know that it works. A very nice feature of this is you can change the positions of these tags <b>without</b> changing the HTML. You just give them a new <b>grid-area:</b> name and it will be put in that cell (or cells).</p>
|
||
|
|
|