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>Obsah a tlačítko na stejné úrovni v HTML</h2> <div class="obal"> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, illo.</p> <p>Cupiditate, obcaecati, numquam earum eos accusamus architecto nesciunt optio est.</p> <p>Adipisci, sed vitae nostrum numquam animi unde obcaecati. Ducimus, aperiam!</p> </div> <button>Tlačítko</button> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obal { position: relative; width: 300px; margin: 1em; } .box { background: #efefef; border: 10px solid #ccc; overflow: hidden; height: 100px; padding: 1em; } .obal button { position: absolute; margin: 0; top: 0; right: 0; border: 10px solid #aaa; padding: 1em; background: #ccc; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>