Search code examples
positionslideshowabsolute

let an absolute element stay in div


Hello I have made a slideshow where you can select pictures and every 8-12 pictures there is the project name but at my code the names just go until to the site end and do not sty in the div. Here is my Code:

Javascript:

 for(var i=0;i<dirs.length;i++)
 {
    for(var t=0;t<real[i].length;t++)
    {
             var  container='pic_show_select';
            if(t==0)
            {
                var a = document.createElement('a');
                a.className = "picschrift";
                a.innerHTML= dirs[i];

                document.getElementById('pic_show_select').appendChild(a);
            }


             var img = document.createElement('img');
             img.src = "../Thumbnails/" + dirs[i]+"/"+real[i][t];
             img.className = "pic";
             img.style.marginRight="8px";
             var pfad="../images/"+dirs[i]+"/"+real[i][t];

             img.onclick = function(pfad){
                    return function(){

                         if(pfad!=momentanesbild)
                         {
                            console.log(pfad);
                            setImageandLoad(pfad) ;
                            momentanesbild=pfad;
                          }
                          else
                          {
                              console.log("Das Bild mit dem Pafd "+pfad+" wird schon angezeigt!");
                          }
                    }

                }(pfad);
          /*   img.onmouseover = function() {
            this.style.border="dashed 1px #000000 ";
                } */
           // img.className +="imagestyle";
              //img.setAttribute("class", "imagestyle");
           /*   if(i==0&&t==0)
            {
               momentanid= img;

               momentanid.className="pic-selected";
            }           */
            if(i==(dirs.length-1)&&t==(real[i].length-1))
            {
            img.style.marginRight="0px";
            }

            document.getElementById(container).appendChild(img);



    }

}

css:

.pic{
border: 1px solid black;
min-Height:100%;
max-Height:100%;

position:relative;

}


.picschrift{

color:white;
position:absolute;
bottom:-20px;

}

Thank`s for helping :)


Solution

  • absolute elements can stay in only fixed or absolute divs if you are giving top,bottom,left etc values to them otherwise it will use hole body to find its absolute position