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

I have a jquery slideshow on this page: http://dataglyph.com/slidetest/

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><!--topRightLinks-->
</div><!--topRightLinksAnchor-->
<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>
    </div><!--fader_controls-->
</div><!--#Fader.fader-->
</div><!--#container-->

The css I'm using is:

.fader{
    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;
    }

Answers


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.

http://jsfiddle.net/TxYme/

HTML:

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

CSS:

#slideshowContainer{
position:relative;
border: 1px solid #000;
width:100%;
min-height:200px; 
}
#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.