.a {margin: 20px;}

.b {margin: 20px 20px 0 20px;}

.c {margin: -20px 80px 0 80px; background: #ffc;}
.l {zoom: 1;} 

.d {margin: -20px 50px 0 50px;}

What's happening here, zoom: 1; has been added to div "c" and div "d" in order to set the hasLayout=true on both as explained in demo#3.

The demo now remains stable in both IE6 and IE7B2, well at least more stable that it's been throughout.

I haven't included screenshots here as they are both the same i.e. I couldn't yet get it to break, so you should be viewing the results in IE ~ though it is still not correct, as it is not honouring the stack level for the block level element inside "c", if view in a compliant browser you see the text in "c" is closer to you that d's background and borders, this is correct (does this suggest that haslayout creates a new stacking context?)

Conclusions

• hasLayout has changed, it seems that it's been given the ability to create a stacking context or at the very least it has now been told that it should appear in the stack levels as if it were higher than a positioned element.
• It is not safe to use position: relative; as a fix for layout errors, even if that error was instigated by position: relative; in the first place ~ for both future and backward compatibility reasons - thus I back up the statement that you not set position: relative; without also setting hasLayout to true [04]
• If the problem is caused by hasLayout=true on an element (like an image) outwith your control then use hasLayout to fix it, don't even consider introducing position: relative; unnecessarily ~ it is possible that it will still need set on all places within the construct but so would position: relative; and that could be asking for more trouble see link above
• It still might not be possible to use position: relative; properly
• If hasLayout is set to true deliberately or by acccident, then it is also possible that you will want to use position relative AND a z-index other than "auto" in order to get all browsers to create a new stacking context as part of the effect
• The hasLayout problem is not going away, it just might show it's face differently than it used to because other properties involved like position: relative; have been improved the actual trigger for what you're seeing just might be a little harder to prove

Previous : Page 3

Glossary/References

---

Claire (Suzy) Campbell «tanfa.co.uk» © 2003-2009