<button id="b" data-pos="static">TOGGLE position:absolute</button>
<div>
<img src="http://placekitten.com/g/350/350" id="i">
</div>
<p>See <a href="http://www.sitepoint.com/12-little-known-css-facts/">article</a>.</p>
body {
padding: 20px;
font-family: Arial, sans-serif;
}
img {
clip: rect(40px, 300px, 220px, 90px);
position: static;
}
button {
margin-bottom: 20px;
}
p {
position: absolute;
bottom: 0;
}
var a = document.getElementById('i'),
b = document.getElementById('b');
b.addEventListener('click', doToggle, false);
function doToggle () {
if (b.getAttribute('data-pos') === 'absolute') {
a.style.position = 'static';
b.setAttribute('data-pos', 'static');
} else {
a.style.position = 'absolute';
b.setAttribute('data-pos', 'absolute');
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.