重新定位CSS滑出效果

我试图让反馈表从包含在div中的图像底部滑出，但是在尝试了一天我在web上学习的各种定位之后，我无法让它正常运行，尽管我曾在picbox div中尝试过，但它影响了行为。我已将代码重置为开头

我不是要求有人帮我做这件事，但是一些建议不会出错，比如从哪里开始！我应该用彩车吗？我意识到相对定位使用整个窗口，所以我想这也应该去。非常感谢您的帮助/指导

以下是CSS代码：

    #picbox
      {
    width:560px;
    background-color:#363;
    color: #9C9;
    border:1px solid #030;  
            margin:0 auto;  
     }    

    #slideout {
        position: fixed;
        top: 40px;
        left: 0;
        width: 35px;
        padding: 12px 0;
        text-align: center;
        background: #6DAD53;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
    }
    #slideout_inner {
        position: fixed;
        top: 40px;
        left: -250px;
        background: #6DAD53;
        width: 200px;
        padding: 25px;
        height: 130px;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        text-align: left;
        -webkit-border-radius: 0 0 5px 0;
        -moz-border-radius: 0 0 5px 0;
        border-radius: 0 0 5px 0;
    }
    #slideout_inner textarea {
        width: 190px;
        height: 100px;
        margin-bottom: 6px;
    }
    #slideout:hover {
        left: 250px;
    }
    #slideout:hover #slideout_inner {
        left: 0;
    }

还有HTML

    <div id="picbox">

        <img src="http://www.pets4homes.co.uk/images/classifieds/2013/05/26/314873/wanted-yorkshire-terrier-puppy-female-51a22e8faaace.jpg">
    </div>

     <div id="slideout">
    <img src="feedback.png" alt="Feedback" />
    <div id="slideout_inner">
        <form>
            <textarea></textarea>
            <input type="submit" value="Post feedback"></input>
        </form>
    </div>
  </div>

---

这是试一试的方法。仔细观察职位风格

#picbox
    {
        width:560px;
        background-color:#363;
        color: #9C9;
        border:1px solid #030;  
    margin:0 auto;  
    }

#slideout {
            position: relative;  /* Carefully Look at this style what I did here */
            top: 40px;
            left: -250px;  /* Carefully Look at this style what I did here */
            width: 35px;
            padding: 12px 0;
            text-align: center;
            background: #6DAD53;
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-border-radius: 0 5px 5px 0;
            -moz-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
        }
        #slideout_inner { /*the hidden form slideout */
            position: relative;  /* Carefully Look at this style what I did here */
            background: #6DAD53;
            width: 200px;
            padding: 25px;
            height: 130px;
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
            text-align: left;
            -webkit-border-radius: 0 0 5px 0;
            -moz-border-radius: 0 0 5px 0;
            border-radius: 0 0 5px 0;
        }
        #slideout_inner textarea {
            width: 190px;
            height: 100px;
            margin-bottom: 6px;
        }

        #slideout:hover { /* the feedback hover */
            left: 0;  /* Carefully Look at this style what I did here */
        }
        #slideout:hover #slideout_inner {
            left: 0;
        }

---

你能再解释一下你想要什么吗？您想在哪里查看反馈表@TreetopsHi Ahmad，我希望绿色反馈图像/标签位于狗狗照片的底部，当鼠标悬停在上方时，反馈表单将从狗狗照片的底部滑出。所以基本上我希望整个过程现在是这样的，但是要从页面的左侧重新定位到图像的底部，然后水平向下滑动。我希望这是有道理的。谢谢你嗨，艾哈迈德，这不是我想要得到的职位。请在这张新的小提琴[链接]上的狗的照片下面看看，你可以看到红色的文本是我希望定位滑出反馈表的地方，所以它看起来像是从图像后面滑出，但垂直向下滑。（为我之前的错误道歉）