Question

I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.

http://jsfiddle.net/6fwf9/2/

HTML:

<div id="header" class="box">header</div>
<div id="bg">
    Cannot highlight this text <br>
    <a href="">Cannot click on this link</a>
</div>
<div class="box">content</div>​

CSS:

.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink; 
     position:absolute; top:0; z-index:-10;}​

EDIT – Image of what I am trying to achieve: https://i.stack.imgur.com/3TF99.jpg

Answer 1

I just saw your picture, This is how I would do it.

<div id="bg">
    <div id="container">
        Cannot highlight this text
        <br>
        <a href="javascript:void();">Cannot click on this link</a>
    </div>

</div>
<div id="header" class="box">header</div>
<div class="box">content</div>

And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height

.box{
    width:150px;
    height:150px;
    z-index:2;
    position:absolute;
    background: cyan;
    top:150px;
    left:20px;
}

#bg{
    background-color:pink; 
    width:200px; 
    height:170px;
    position:absolute;
    top:0px;
}
#header{
    position:absolute;
    width:150px;
    height:50px;
    left:20px;
    top:20px;          
    z-index:2;
    background: cyan;
}
#container{
    width:100%;
    position:relative;
    border:1px solid black;
    margin-top:100px;
}

The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.