在浏览器视口外显示元素

Question

有没有什么方法或工作流程可以让您在设计时看到部分（或全部）位于浏览器视口之外的元素？喜欢在 Illustrator 中使用画板吗？

例如：假设我在正文中的 {left: -50px} 处放置了一个矩形（那里是负号），这意味着 50px 的矩形位于视口之外。是否有任何工具可以直观地表示它？

Answer 1

A hack solution：创建一个 div 以包含您网站的所有内容，但制作 width < 100% 以便您可以看到内容溢出到 body.随意改变宽度..

<div class="virtualize-overflow">
  Normal Content
  <div class="overflow">Overflowing content</div>
</div>

.virtualize-overflow{
  display:block;
  background-color:gray;
  width:50%;
  height:50%;
  margin:auto;
  margin-top:30%;
}

.overflow{
  display:block;
  width:250px;
  height:100px;
  margin-left:-100px;
  background-color:red;
}