顯示瀏覽器視口之外的元素

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