Created
December 16, 2013 15:38
-
-
Save ffoodd/7989000 to your computer and use it in GitHub Desktop.
Démo d’une interception de position qui parasite la position fixe d’un pseudo-élément
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Démo d’une interception de position qui parasite la position fixe d’un pseudo-élément | |
*/ | |
body { | |
font-family: Arial, sans-serif; | |
background: #eee; | |
padding: 2em; | |
} | |
header { background: #ddd; } | |
nav { | |
background: #fff; | |
margin: 0 auto; | |
width: 500px; | |
} | |
ul { | |
padding: 2em; | |
/* C’est là que la magie opère : ceci crée un nouveau contexte d’empilement, | |
et le pseudo-élément qui suit va donc s’y référer comme étant la racine */ | |
transform: rotate( 0deg ); | |
width: 500px; | |
} | |
a::after { | |
position: fixed; | |
content: "Ceci est un test"; | |
top: 0; | |
left: 0; | |
height: 1.25em; | |
background: #fc0; | |
display: block; | |
text-align: center; | |
z-index: 99; | |
width: 100%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header role="banner"> | |
<nav role="navigation"> | |
<ul> | |
<li>Texte</li> | |
<li><a href="#">Lien 2</a></li> | |
</ul> | |
</nav> | |
</header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment