在浏览器视口外显示元素

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;
}