How can I consistently position links across different resolutions above content with z-index stacking?

I have a jquery slideshow on this page:

I'm having issues placing links consistently in the upper right corner of this page. I can get them where I want on my screen using relative position to the container topRightLinksAnchor and top/left. The div also needed to be set to z-index 3 to be visible. The slides are at z-index 2 and 3 when they transition.

Here's the full index page:

<div id="topRightLinksAnchor">
<div id="topRightLinks">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<div id="container">
<div id="Fader" class="fader">
<img class="slide" src="images/slide1.png"/>
  <img class="slide" src="images/slide2.png"/>
  <img class="slide" src="images/slide3.png"/>
  <img class="slide" src="images/slide4.png"/>
  <img class="slide" src="images/slide5.png"/>
  <img class="slide" src="images/slide6.png"/>
  <img class="slide" src="images/slide7.png"/>
  <img class="slide" src="images/slide8.png"/>
  <img class="slide" src="images/slide9.png"/>
  <img class="slide" src="images/slide10.png"/>
  <img class="slide" src="images/slide11.png"/>
  <img class="slide" src="images/slide12.png"/> 
    <div class="fader_controls">
      <ul class="pager_list"></ul>

The css I'm using is:

    position: relative;
    /*padding-top: 60%;*/
    /*height: 776px;*/
    overflow: hidden;

#Fader {
    margin: 0 auto;
    /*width: 1224px;*/  
#container {
    width: 100%

.fader .slide{
    position: absolute;
    /*width: 100%;*/
    height: 100%;
    top: 0;
    z-index: 1;
    opacity: 0;

.fader img.slide{
    height: auto;

.fader .prev,
.fader .next{
  position: absolute;
  height: 80px;
  line-height: 55px;
  width: 50px;
  font-size: 100px;
  text-align: center;
  color: #fff;
  top: 50%;
  left: 0;
  z-index: 4;
  margin-top: -25px;
  cursor: pointer;
  opacity: .7;
  transition: all 150ms;

#topRightLinks {
    position: relative;
    z-index: 3;
    top: 168px;
    left: 882px;


You need to position absolute the div you want in the top right. Then you need to position relative the parent container. see this very simple JSFiddle for an example.


<div id="slideshowContainer">
   <div id="topRightLinks">
       <a href="#">link 1</a>
       <a href="#">link 1</a>


border: 1px solid #000;
#topRightLinks {
position: absolute;
z-index: 3;
top: 10px;
right: 10px;

I'm assuming - .fader_controls is your control set make this position absolute and #Fader.fader position relative.

Hope this helps,

Need Your Help

I'm leaking memory when creating a DirectX 10 buffer

c++ memory-leaks directx

I have a simple rendering process that sends a set of vertices to a geometry shader and renders sprites from that information.