Stacks does not normally allow elements to escape from the central content container on a page. So the sticky stack instead uses some basic jQuery Javascript code to append the sticky onto the opening <body> tag at the start of your page. The Sticky has a CSS z-index value of 100, which should be enough to display the sticky on top of other content, but not let it interfere with lightbox effects. The Sticky stack is easy to setup, and you can see an example of it at the top of this page.

Note If you are looking for a more advanced version with more customisable options, support for animation effects, ability to dismiss and the option to cookie site visitors, have a look at the Gateway stack instead.

Setup

  1. After installation, drag and drop a Sticky stack into your page.
  2. In the placeholder, drag and drop other stacks or content (these will be shown in your Sticky).
  3. In the stack settings, you can change the size and position of the Sticky.
  4. Optionally, you can also set the entire Sticky as a link through to a page, resource or URL.

Important You should only use one Sticky stack per-page. Take care to ensure your Sticky does not obscure page content or navigation links.

Print output

Sticky stacks are automatically hidden from print and PDF output, to prevent them getting in the way of other page content.

Oh wow! This is a Sticky Stack!

Buggy layering?

If you find that the Sticky stack is going behind other content on a page (like stretched backgrounds, video or banners) you can sometimes force the stack further forward using this custom CSS code:

.sticky {
    z-index: 9999 !important;
} 
Z-index is the CSS property which arranges the order of elements on a page. So (as an example) giving Sticky a z-index value of 100 would lift it forward of elements with a z-index of 90, but Sticky would still remain behind a lightbox window shade with a z-index of 500 applied. 9999 is the maximum z-index value an element can safely have (before Internet Explorer goes funky) so that will normally force Sticky right to the very front of a page. Z-index often relies on other elements in a page having a position and z-index value applied.

Source code

This is the source code you can use to create your own Sticky containers in non-stack pages. In the code, change the width, position and background settings to suit your needs. Other CSS preoperties like borders or rounded corners could also be applied.

<div style="display:block; position:fixed; top:0px; right:0px; height:200px; width:200px; background:#FFFFFF;">
Hello World!
</div>
@import((Code Snippets))
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.