Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Changing SugarCube passage z-index

edited August 2016 in Help! with 1.x
I can't seem to figure out how to change the z-index of passages in SugarCube 1. The CSS says it's in #passages, but changing that does nothing. What controls it?
#passages{z-index:10;margin-right:16%}

Is what the css says. However, any element I put above z-index 0 also hides the passage. So clearly, something is overriding #passages to make it 0, and I have nothing in my custom stylesheet that affects the z-index of passages, .passage, or body.

I can 't even find any active z-index entry in dev tools. They're all crossed out as invalid.

Comments

  • edited August 2016
    If you look at the HTML structure documentation you will see that the area that contains the HTML elements that represent the content of the current Passage being shown are:
    <div id="passages" role="main">             <!-- The overall passage container -->
    	<section class="passage …" id="…">      <!-- The active passage container -->
    		<header class="header"></header>    <!-- The active passage header (unused) -->
    		<div class="body content"></div>    <!-- The active passage content -->
    		<footer class="footer"></footer>    <!-- The active passage footer (unused) -->
    	</section>
    </div>
    
    Without knowing exactly what you are trying to do (so no testing) I would guess that your z-index property should be on either the .passage classed element or the .content classed element.
  • Claretta wrote: »
    I can't seem to figure out how to change the z-index of passages in SugarCube 1.
    In SugarCube v1 it is a part of the rules for the #passages element:
    #passages {
    	z-index: 10;
    }
    

    In SugarCube v2 it is a part of the rules for the #story element:
    #story {
    	z-index: 10;
    }
    

    In either case, its function within SugarCube is chiefly to ensure that the loading screen, UI bar, and dialogs layer atop the story/main-passage display area.

    Claretta wrote: »
    […] any element I put above z-index 0 also hides the passage. So clearly, something is overriding #passages to make it 0, and I have nothing in my custom stylesheet that affects the z-index of passages, .passage, or body.

    I can 't even find any active z-index entry in dev tools. They're all crossed out as invalid.
    It must be coming from somewhere on your end, as there is no other modification to the z-index of the element in question anywhere within SugarCube's code.

    To rule out that one of the libraries included by SugarCube is the cause of what you're seeing, I just built and tested examples in both v1 and v2. Upon using the developer tools in Firefox, Chrome, and IE to inspect the element in question, in neither v1 nor v2 did I have a problem seeing an active z-index property, with the expected value of 10.

    I don't know what else to say at this point save to check your end more thoroughly. If it's not coming from CSS rules or code you've written, then perhaps a library you're using or something in that vein.
  • edited August 2016
    Deleting my custom css fixed the issue, but I can't spot anything in the css that should be doing it. The body, html, passages, .passage and any animation rules are clear of z index changes. Something in my css is changing passages to zindex 0, and I have no idea what it could be.

    Even if I wanted to check my game more thoroughly I don't know where to look. It's not really a great idea for me to be fudging with the passage z index anyway, so I can leave it alone.

    Thanks for investigating anyway. :)

  • edited August 2016
    I found this What No One Told You About Z-Index article that explains that changing something like the opacity of an element can effect the stacking order of the elements.
Sign In or Register to comment.