[Pro] How to set z-index so navigation bar is on top?

Freeway
1

One thing to remember about z-index is that it is locally scoped. If you have a parent element and a number of child elements within it, you can set a z-index on the child elements, and they will be respected within the scope of the parent. But setting a sufficiently high z-index will never allow the child to “escape” from its parent with respect to the page body or the parent’s other peer elements within the body.

.

In a related example towards layering with z-indexes, I set the (should-be-on-top-of-all) item NAV1a1 in the DIV (extended) to z=19, this item has in the css FRW z-index=3, so it’s alright above item ‘nybygga’ with z-index=2, but still not above the Facebook Like button (‘top-facebook-like’) with z-index=12.

.

The NAV1a1 is the navigation bar on this site:

.

How to set the z-indexes so the navigation bar (‘NAV1a1’) covers the Facebook Like button (‘top-facebook-like’) and the grey strip (‘nybygga’)?

I’m trying to get my head around this……

/ with best regards,

Omar KN

Stockholm, Sweden

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

How to set the z-indexes so the navigation bar (‘NAV1a1’) covers the Facebook Like button

If you want to do this you have to make sure that the z-index of the navigation items parent (which is at the same level as the facebook like item) has a higher z-index.

On your page the nav parent is header1 (z-index=1) while top-facebook-like has a z-index of 12

It may be easier if you move the fbl container to be inline (ie a child) of the header1 Div

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Hi Dave,

Thank you, but I had to solve it in a rather ‘unconventional’ way: to use a dummy Facebook like button as a hyperlink to an anchor further down on the page!

This doesn’t of course allow me to have it on the Master-page, but so be it.

The structure is this that the lower part (≈ 20% )of the header is stuck under the next layer - for body content, and pressing the Facebook like button would open their little window, which then goes behind the layer - for body content.

So it’s quite tricky,
BUT I’d LIKE to be able to set an ANY item an manually ADJUST the z-index.
Is this possible?

So f ex I set the navigation bar z to 19:

div id=“NAC1a1” z-index=“19”

which should overwrite the css-set z-index.

/
with best regards,

Omar KN

Stockholm, Sweden

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

You can easily override the Freeway-calculated z-index using the Item/Extended menu item and dialog. Make sure you select the style tab, then click new, and enter z-index in the Name field and any number you like in the Value field. Freeway will only output the value you entered – you won’t end up with two different declarations of the same property.

However, it’s critical for you to understand something about z-index: context. If each of your elements is a peer – a pure child of the PageDiv “main” container, positioned absolutely, then z-index will be entirely intuitive. Raise one, lower another, everything will make sense and work. But if you are nesting your elements, as in the “in-flow” or inline layout model (which you should absolutely be doing) then changing the z-index of an element can only raise or lower it relative to its peers – the other children of its parent. Let’s say you draw two overlapping boxes on the Freeway design space, and then double-click inside one of them and insert some child elements inline (or simply click on one of them to select it, then draw some child elements “into” it). If the second box you drew has z-index 2, and the first one has z-index 1, then no matter how high you make the z-index of one of the first box’s children, it will never rise above the second box in overall stacking order.

Walter

On Oct 28, 2015, at 7:19 AM, OmarKN email@hidden wrote:

Hi Dave,

Thank you, but I had to solve it in a rather ‘unconventional’ way: to use a dummy Facebook like button as a hyperlink to an anchor further down on the page!

This doesn’t of course allow me to have it on the Master-page, but so be it.

The structure is this that the lower part (≈ 20% )of the header is stuck under the next layer - for body content, and pressing the Facebook like button would open their little window, which then goes behind the layer - for body content.

So it’s quite tricky,
BUT I’d LIKE to be able to set an ANY item an manually ADJUST the z-index.
Is this possible?

So f ex I set the navigation bar z to 19:

div id=“NAC1a1” z-index=“19”

which should overwrite the css-set z-index.

/
with best regards,

Omar KN

Stockholm, Sweden

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

Thank you Walter,

I’ll have to experiment on this on a clean, new document, ASAP!

So far so good!

/
with best regards,

Omar KN

Stockholm, Sweden

freewaytalk mailing list
email@hidden
Update your subscriptions at: