HI,
Can anyone spot why Freeway 6 is clipping the red div (with z-index:200) and not overlapping the inline div below it?
Published in Freeway 5 it works fine, open the same file in Freeway 6 and the published result does not overlap. The top div has overflow:visible; z-index:200; on both outputs.
It’s late in a busy day and I can’t spot where its wrong. Can you?
David Owen
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It’s a nesting issue. Move the red box out of the blue box. z-index is relative to the parent element. If you have an element with z-index 1 million inside another element with a z-index of 2, that 1 million item will never rise above another element on the same page with z-index of 3.
Walter
On Jun 12, 2013, at 1:21 PM, David Owen wrote:
HI,
Can anyone spot why Freeway 6 is clipping the red div (with z-index:200) and not overlapping the inline div below it?
Published in Freeway 5 it works fine, open the same file in Freeway 6 and the published result does not overlap. The top div has overflow:visible; z-index:200; on both outputs.
It’s late in a busy day and I can’t spot where its wrong. Can you?
Freeway 5 and Freeway 6 overlapping box
Thanks
David Owen
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thing is, this works perfectly in the Freeway 5 output. Why is that? And not in Freeway 6?
(I’m working on as banner that needs to drop down over the lower inline page content. Think of it like a menu drop down)
–
David Owen
On 12 Jun 2013, at 18:32, Walter Lee Davis email@hidden wrote:
It’s a nesting issue. Move the red box out of the blue box. z-index is relative to the parent element. If you have an element with z-index 1 million inside another element with a z-index of 2, that 1 million item will never rise above another element on the same page with z-index of 3.
Walter
On Jun 12, 2013, at 1:21 PM, David Owen wrote:
HI,
Can anyone spot why Freeway 6 is clipping the red div (with z-index:200) and not overlapping the inline div below it?
Published in Freeway 5 it works fine, open the same file in Freeway 6 and the published result does not overlap. The top div has overflow:visible; z-index:200; on both outputs.
It’s late in a busy day and I can’t spot where its wrong. Can you?
Freeway 5 and Freeway 6 overlapping box
Thanks
David Owen
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter, here’s an example of this working in 5…
Attempting the same in Freeway 6 no joy. Trying to play spot the difference!
–
David Owen
On 12 Jun 2013, at 18:32, Walter Lee Davis email@hidden wrote:
It’s a nesting issue. Move the red box out of the blue box. z-index is relative to the parent element. If you have an element with z-index 1 million inside another element with a z-index of 2, that 1 million item will never rise above another element on the same page with z-index of 3.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Overflow:Visible vs Overflow:Hidden would be my guess.
Walter
On Jun 12, 2013, at 1:50 PM, David Owen wrote:
Walter, here’s an example of this working in 5…
Attempting the same in Freeway 6 no joy. Trying to play spot the difference!
–
David Owen
On 12 Jun 2013, at 18:32, Walter Lee Davis email@hidden wrote:
It’s a nesting issue. Move the red box out of the blue box. z-index is relative to the parent element. If you have an element with z-index 1 million inside another element with a z-index of 2, that 1 million item will never rise above another element on the same page with z-index of 3.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Both 5 & 6 has the top div as overflow:visible.
I notice that Freeway 6 by default sets the top div as z-index:0 … whereas Freeway 5 does not set anything for z-index. Is that it?
See here code…
David Owen
On 12 Jun 2013, at 19:03, Walter Lee Davis email@hidden wrote:
Overflow:Visible vs Overflow:Hidden would be my guess.
Walter
On Jun 12, 2013, at 1:50 PM, David Owen wrote:
Walter, here’s an example of this working in 5…
Attempting the same in Freeway 6 no joy. Trying to play spot the difference!
–
David Owen
On 12 Jun 2013, at 18:32, Walter Lee Davis email@hidden wrote:
It’s a nesting issue. Move the red box out of the blue box. z-index is relative to the parent element. If you have an element with z-index 1 million inside another element with a z-index of 2, that 1 million item will never rise above another element on the same page with z-index of 3.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi David,
not much help here, but well investigated:
yes, exactly it’s that z-index value 0 that is causing this issue.
I wrote a very quick fiddle and recognized that removing or increasing the number of the z-index value indeed make the absolute positioned item (the green one) overlap.
In Freeway it is exactly the same:
Setting a z-index: 1 (or higher) for the parent-div of the absolute positioned one did the game (in browser), but unfortunately not in the design-view (naturally).
So covering both (design-view and browser-view), I tend to say that placing the absolute div into a div below and set a negative position for it should be fine as well. But this only works if the div above has a defined height (ohhh how complicated to explain - I hope you get the gist).
The question now:
Does a relative positioned item really need a z-index by default or not? Cause this could end up up in a z-index orgy and/or weirdness.
Some further infos (without the answer 
but good to know:
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Thomas
Yes it’s Freeway 6 setting z-index:0 by default. Unlike Freeway 5 setting nothing for z-index. This hiccup caught me out upgrading a Freeway 5 document,
Anyone using Freeway 6 will need to increase the z-index of the parent div if they want say a drop down menu to work inline.
David Owen
On 13 Jun 2013, at 08:10, “Thomas Kimmich” email@hidden wrote:
Hi David,
not much help here, but well investigated:
yes, exactly it’s that z-index value 0 that is causing this issue.
I wrote a very quick fiddle and recognized that removing or increasing the number of the z-index value indeed make the absolute positioned item (the green one) overlap.
Edit fiddle - JSFiddle - Code Playground
In Freeway it is exactly the same:
Setting a z-index: 1 (or higher) for the parent-div of the absolute positioned one did the game (in browser), but unfortunately not in the design-view (naturally).
So covering both (design-view and browser-view), I tend to say that placing the absolute div into a div below and set a negative position for it should be fine as well. But this only works if the div above has a defined height (ohhh how complicated to explain - I hope you get the gist).
The question now:
Does a relative positioned item really need a z-index by default or not? Cause this could end up up in a z-index orgy and/or weirdness.
Some further infos (without the answer
z-index | CSS-Tricks - CSS-Tricks
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options