Skip to content
This repository was archived by the owner on Oct 17, 2025. It is now read-only.

CSS examples: example for z-index #570

Merged
wbamberg merged 16 commits into from
Feb 16, 2018
Merged

CSS examples: example for z-index #570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6e8df35
feat: update z-index css to fit minimum width requirements
Feb 8, 2018
2c8199f
feat: modify z-index live demo to accomodate small screen widths
Feb 8, 2018
f90a0d3
merge with mdn master
Feb 8, 2018
aa486ca
merge with mdn master 2
Feb 9, 2018
5130bd5
Merge pull request #1 from veekas/z-index
Feb 9, 2018
bb12cfb
fix: merge conflicts related to indentation and code ids
Feb 9, 2018
b20dcfa
accept incoming change from mdn master
Feb 9, 2018
14eb84c
feat: make demo look like current example
Feb 9, 2018
9ed6226
feat: modify z-index demo to reflect current example
Feb 9, 2018
d9ffe66
fix: text and box placement
Feb 9, 2018
ce01486
merge z-index-opt2 with local master
Feb 9, 2018
7455b09
fix: duplicate example-choice
Feb 15, 2018
774ebd5
refactor: move z-index files to positioned layout folder
Feb 15, 2018
0d4cb86
fix: also move meta info to positioned-layout meta.json file
Feb 15, 2018
dc74244
fix: remove bundle files
Feb 15, 2018
d1b7ad3
fix: change cssExampleSrc and exampleCode
Feb 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions live-examples/css-examples/positioned-layout/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@
"fileName": "position.html",
"title": "CSS Demo: position",
"type": "css"
},
"zIndex": {
"baseTmpl": "tmpl/live-css-tmpl.html",
"cssExampleSrc": "../../live-examples/css-examples/positioned-layout/z-index.css",
"exampleCode": "live-examples/css-examples/positioned-layout/z-index.html",
"fileName": "z-index.html",
"title": "CSS Demo: z-index",
"type": "css"
}
}
}
74 changes: 74 additions & 0 deletions live-examples/css-examples/positioned-layout/z-index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
#example-element {
top: 15px;
left: 15px;
width: 180px;
height: 230px;
position: absolute;
/* center the text so it is visible even when z-index is set to auto */
line-height: 215px;
font-family: monospace;
background-color: #fcfbe5;
border: solid 5px #e3e0a1;
z-index: auto;
}

.container {
display: inline-block;
width: 250px;
position: relative;
}

.block {
width: 150px;
height: 50px;
position: absolute;
font-family: monospace;
}

.blue {
background-color: #E5E8FC;
border: solid 5px #112382;
/* move text to the bottom of the box */
line-height: 55px;
}

.red {
background-color: #fce5e7;
border: solid 5px #e3a1a7;
}

.position1 {
top: 0;
left: 0;
z-index: 6;
}

.position2 {
top: 30px;
left: 30px;
z-index: 4;
}

.position3 {
top: 60px;
left: 60px;
z-index: 2;
}

.position4 {
top: 150px;
left: 0;
z-index: auto;
}

.position5 {
top: 180px;
left: 30px;
z-index: auto;
}

.position6 {
top: 210px;
left: 60px;
z-index: auto;
}
52 changes: 52 additions & 0 deletions live-examples/css-examples/positioned-layout/z-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<section id="example-choice-list" class="example-choice-list large" data-property="zIndex">

<div class="example-choice" initial-choice="true">
<pre><code class="language-css">z-index: auto;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code class="language-css">z-index: 1;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code class="language-css">z-index: 3;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code class="language-css">z-index: 5;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code class="language-css">z-index: 7;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

</section>

<div id="output" class="output hidden large">

<section id="default-example" class="default-example container">
<div id="example-element">Change my z-index</div>
<div class="block blue position1">z-index: 6</div>
<div class="block blue position2">z-index: 4</div>
<div class="block blue position3">z-index: 2</div>
<div class="block red position4">z-index: auto</div>
<div class="block red position5">z-index: auto</div>
<div class="block red position6">z-index: auto</div>
</section>

</div>
8 changes: 0 additions & 8 deletions live-examples/css-examples/transitions/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,6 @@
"fileName": "transition-timing-function.html",
"title": "CSS Demo: transition-timing-function",
"type": "css"
},
"zIndex": {
"baseTmpl": "tmpl/live-css-tmpl.html",
"cssExampleSrc": "../../live-examples/css-examples/transitions/z-index.css",
"exampleCode": "live-examples/css-examples/transitions/z-index.html",
"fileName": "z-index.html",
"title": "CSS Demo: z-index",
"type": "css"
}
}
}
48 changes: 0 additions & 48 deletions live-examples/css-examples/transitions/z-index.css
View file
Open in desktop

This file was deleted.

38 changes: 0 additions & 38 deletions live-examples/css-examples/transitions/z-index.html
View file
Open in desktop

This file was deleted.