Setting z-index via CSS

sprockets

I thought I would share this in case others find it useful.



I had a situation where I have an interface item with an alpha-channel drop shadow. Items need to be placed under it on different screens. Because of other items on screen and the way layering works I could not just set my drop-shadowed item to always on top. I am also opposed to having interface items in the code more than once.



What I did do was create a CSS with a number of class styles: zup1, zup10, zup50 etc. and set the z-index to the number in the style.



The definition looks like this:



.zup10 {

z-index:10 !important;

}



The word !important forces the browser not to overwrite this value further down in the cascade. Slightly dangerous they say, but its working for me at the moment.



I then set the item I need layered up higher to have the class of zup10.



It would be nice if we had access to every object's z-index as a property in Lectora, but until that is exposed this is one way to achieve the same aim.



NOTE: This has not been thoroughly tested yet. I will post any issue that may arise here.



Mike

ssneg

Great tip!



Offtopic: I don't think Lectora should expose CSS properties within the interface. The fact that it allows to add CSS rules and assign classes to objects is enough. I just wish they allowed entering style information directly onto objects, that would sometimes be easier/faster than adding a class and adding a CSS rule.

loungemaster

Hi Sprockets,



does this work on every object in Lectora? I have the same problem which you had with an slide-in-slide-out-TOC which lies sometimes under other layers on some slides when sliding out.



It seems to me as the TOC does not react on the zup10-class. Does anybody have another idea? Do I need another selector?



Thanks Robert

ssneg

Did you ADD the zup10 class to the menu in Lectora?

loungemaster

@ssneg 61455 wrote:

Did you ADD the zup10 class to the menu in Lectora?

Hi ssneg,



thank you for your reply. I think that I added the class in the right way:



1. Creating a .css with the windows text-editor and the following code:



.zup10 {

z-index:10 !important;

}



2. After adding this css-file as html-extension and defining as css I added "zup10" to the toc preferences (appearence).



3. When exporting in html, after defining and adding the class, the slide-out-function didn't work anymore. I can't find my mistake.



I work with the german (EU-) version.

ummakumma

Seems that TOC and menu doesn´t reply to css z-index properties. Has anyone found a solution for this?

klaatu

If you are trying to keep the menu and toc on top of everything when they transition in and out, both can be set to "always on top" in the appearance tab in properties. I tested it out on multiple pages using one of each item in the add images tab and it worked every time (transitioning both in and out).

Setting a z-index is not always as simple as forcing it to a higher number. See the link below for a good article that explains some of the issues you might run into.

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Darrel