javascript - JavaScriptでdivテキストを同じ場所に配置しようとしています

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、画像をクリックすると、高さ約 300px のテキスト ボックスが表示され、右側の div id="#col2" の中央に留まる機能を実現することです。他の画像をクリックしますが、テキスト ボックスは同じ場所にとどまり、移動しません。