css - 在浏览器视口(viewport)外显示元素

Question

有没有什么方法或工作流程可以让您在设计时看到部分(或全部)位于浏览器视口(viewport)之外的元素？就像您可以在 Illustrator 中使用画板一样？

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

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