Z-Indexing Expand Element

Not sure if I completely understand what you are trying to do.

You mentioned a semi-transparent div that fades out the text. I assume you are looking for the effect described in this post. If so, where exactly did you want to show this?

The page currently uses a semi-transparent png file placed at the bottom of the div at z-index=1 to fade out the text underneath it.

Which div? The Trigger div? The target div? The div that contains the expand element? Some other div above the expand element?

That post is what I’m trying to do!

The fade is at the bottom of the div that ends at the bottom of that section/page, part of the page structure.

<p>hello I’m talking about random stuff. who knows what on earth is going on.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam lorem sem. Nunc interdum dolor non volutpat tincidunt. Nulla blandit arcu at tristique vehicula. Suspendisse potenti. Donec suscipit mi pharetra, tempor ex ac, convallis odio. Aliquam urna odio, hendrerit ac maximus sit amet, tincidunt vel sapien. Aliquam tempus mi luctus magna tincidunt fringilla.</p>
<p>Pellentesque condimentum, mi nec bibendum viverra, odio dolor ornare ipsum, eu dictum arcu nunc sit amet nisi. Aliquam a lorem nec neque finibus tempor et lobortis enim. Fusce vel sem id nunc efficitur iaculis ut ac nisl. Suspendisse potenti. Praesent cursus sed est et auctor. Suspendisse eu fringilla erat. Etiam elementum augue eros, ut tempor turpis lobortis non. Donec egestas turpis sed enim rhoncus, non dictum lacus consectetur. Etiam ultrices semper purus eget gravida. Vestibulum dignissim efficitur libero at lobortis. Vestibulum vitae scelerisque sapien. Integer libero massa, efficitur at laoreet in, semper sit amet libero. Aenean vitae faucibus turpis. Aenean congue lorem a enim interdum tempor. Nulla eget sem eget mi ultrices dictum non vitae neque.</p>
<p><span id="bottom_fade"><br />
</span></p>
<p></br><br />
</br><br />
</br><br />
</br></p>
<div class="topleveltext">
<p style="text-align: center;"><input type="hidden" id="scrollonclose-id3851" name="auto"/><h4 class="collapseomatic noarrow scroll-to-trigger" id="id3851"  tabindex="" title="Tell me more about you and your photography Tom">Tell me more about you and your photography Tom</h4><h4 id='swap-id3851' alt='' class='colomat-swap' style='display:none;'>tl;dr You're a photographer, show me the photos</h4><div id="target-id3851" class="collapseomatic_content ">
<p style="text-align: center;">hello I’m talking about randomness. who knows what on earth is going on.
</p>
<p style="text-align: center;"></div>
</div>

    </div>
    <!-- Container -->

the span contains the gradient and is then followed by the expand shortcode. I want the expansion to always be on top of this span but every piece of css and shortcode has failed.

I’ve tried putting the entire code inside a separate div with the only class property being its z-index as a last resort but it didn’t work.

ok, so the fade out text, then the trigger below.
when the trigger is clicked, the target expands…
…AND the fade effect toggles off.

when the trigger is clicked again, and the target collapses….
…AND the fade effect is again visible.

If this is what you are trying to do, it’s possible using the Expand/Collapse Callback features of Collapse-Pro-Matic.

If you like we can create a demo showing you step-by-step how this can be accomplished, but sadly, it’s not something that Collapse-O-Matic can do natively.

SORRY.

Syntax error on my part in my CSS. I’ll get there one day! Thanks for your prompt reply though!

Tom

ah it didn’t work. Ive tried assigning a z-index of 99 to every single class and ID that I can find to do with the expansion and it doesnt work!

The only reason I’m not getting the pro version yet is cos im getting frustrated at why my logic isnt right.

Sorry, but you need to be more specific on what you are trying to accomplish.
You have the faded text working… what more are you trying to do?

It seems to me you are trying to change the z-index so that something that is designed to show on top of an item (the fade over the text) is shown under an item (the expand element over the fade)

Please walk us through what it’s suppose to look like in full detail in the collapse and expanded states.

So idea in my head:

<container>
************
Expand Element (high Z)
************
div with background of:
Transparent to Background Colour Fade.png
position:absolute at bottom 0px
************
standard Text (low z)
***********
<container>

With my heights and margins etc the png covers the last couple of lines of the standard text to a point that I want. I then want the entire expand element to show on top of this fade, ie be completely unaffected by it. Once the expand is triggered, the expanded text will be on top of the fade which, as its anchored to the bottom of the expanded container, no longer affects the standard text above the expand element.

The way I tried to go about it was not elegant in the slightest: put each of those three elements in their own div with IDs to provide z-index values of 0(standard text), 1 (fade div) and 2(expand element). Needless to say not only was it ugly but it didnt work!

T