WEB骇客
  <button id="b" data-pos="static">切换定位方式absolute</button>

<div>
  <img src="https://www.webhek.com/wordpress/wp-content/uploads/2014/07/350.jpg" id="i">
</div>
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');
  }
}
返回