【css技巧】元素定位在版心外，但不会导致body有滚动条

需求：一张图片定位在版心右侧外，同时下半部分在footer上。

<style type="text/css">
.body {
  width: 100%;
  position: relative;  // 相对于外层div定位
  min-width: 1200px; // 设定最小宽度，避免浏览器宽度小于1200时，背景图片没有平铺的问题
  overflow: hidden; // 隐藏定位img元素大于1200px外的部分，同时不会出现滚动条
  background: url('平铺图片.jpg') repeat; // 平铺的背景图片
}
.inner {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}
img {
  position: absolute;
  right: -100px;
  bottom: -300px;
}
footer {
  height: 200px;
}
</style>
<div class="body">
  <div class="inner">
     <img src="" alt=""/>
  </div>
  <footer>版权标志</footer>
<div>

Lenny-Hu / note

【css技巧】元素定位在版心外，但不会导致body有滚动条 #52