- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 15 Oct 2013 00:41:21 +1100
- To: "Kang-Hao (Kenny) Lu" <kanghaol@oupeng.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
- CC: WWW Style <www-style@w3.org>
[Part reply] On 14/10/2013 10:20 PM, Kang-Hao (Kenny) Lu wrote: > (2013/10/14 17:57), Alan Gresley wrote: >> The best way to appreciate what overflow is is to consider what a >> veiwport is. A viewport or better a UA may render a scollbar and if it >> does, then the behavior is that of overflow: auto. It is also important >> to know that there is visible overflow and hidden overflow (not to be >> confused with overflow: visible or overflow: hidden). > > What are "visible overflow" and "hidden overflow" then? I am not > grasping the concept. Where is the red box <div id"strut"> in the below test located? The simple answer is that it is hidden since anything that overflows from the left edge of the viewport is always hidden (in Latin based writing mode). But programmatically, its still there and that is why I can place another box within it and have it right border visible within the viewport. Please test the below code. <!doctype html> <html id="test1"> <head> <style type="text/css"> #outer { position: absolute; left: -10000px; height: 50px; background: orange; } #strut { width: 100px; background: red; } #inner { margin-left: 10000px; border-right: 100px solid green; } </style> </head> <body id="test2"> <div id="outer"> <div id="strut">This element is within hidden overflow <div id="inner">This element is within the viewport</div> </div> </div> <button onclick="document.getElementById('test1').style.overflow = 'hidden';">Test 1</button> <button onclick="document.getElementById('test2').style.overflow = 'hidden';">Test 2</button> </body> </html> I could style the <body> or <html> element with overflow: hidden (which you can select either by 'Test 1' or 'Test 2') and it still does not change anything. The concept behind overflow: clip (or whatever is desired) is that programmatically, the part that is outside the viewport does not exist. Nothing is laid out and nothing would render. > Cheers, > Kenny Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/
Received on Monday, 14 October 2013 13:41:47 UTC