Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h1>Překrývání rámečku</h1> <h2>Záporným odsazením</h2> <div class="obal margin"> <button>Tlačítko</button> </div> <h2>Zápornou posicí</h2> <div class="obal posice"> <button>Tlačítko</button> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obal { background: #efefef; border: 10px solid #ccc; position: relative; width: 300px; height: 100px; margin: 1em; overflow: hidden; } .obal > button { position: absolute; border: 10px solid #aaa; padding: 1em; background: #ccc; } .obal.margin > button { margin: -10px; top: 0; right: 0; } .obal.posice > button { margin: 0; /* kvůli Chrome */ top: -10px; right: -10px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>