试图让div文本在javascript中处于同一位置

Question

本网站上的第一条消息。

无论如何，我的问题是：

<section class="background-pourqui">
<div class="col-first-child2">
    <div id="image-box">
        <div class="img-box">
            <span class="img-legend">
                le texte 1
            </span>
        <img class="boxpourquiimage" id="image1" src="Images/boxpourqui1.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 2
            </span>
        <img class="boxpourquiimage" id="image2" src="Images/boxpourqui2.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 3
            </span>
        <img class="boxpourquiimage" id="image3" src="Images/boxpourqui3.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 4
            </span>
        <img class="boxpourquiimage" id="image4" src="Images/boxpourqui4.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 5 
            </span>
        <img class="boxpourquiimage" id="image5" src="Images/boxpourqui5.png" alt="#" /></div>
    </div>
</div>

<script>
$(".img-box img").click(function(e) {

    var target = $(this).parent().find('.img-legend');
    $('.img-box').each(function(index, element) {
        $(this).find('.img-legend').not(target).fadeOut(100)
    });
    $(this).parent().find('.img-legend').fadeToggle(100);

});

<div class="col2">

</div>

CSS

span {
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
display:none;
padding:0 20px;}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);}
.img-box{
position:relative;}
.img-box span{
display:none;}
.img-legend{
right:0;
padding-right:10px;
display:none;
float: right;
position: fixed;

}

我的目标是获得一个功能javascript，当我点击一个图像时，它会显示一个高约300像素的文本框，并保持在右边div =“＃col2”的中心，我想在单击其他图像时更改文本，但文本框保持在同一位置而不移动。