css - 重新定位 CSS 滑出效果

Question

我试图让反馈表从包含在一个 div 中的图像底部滑出，但是在尝试了我一直在网络上学习的各种定位后一天，我无法让它表现出来是的，虽然我已经设法在一个阶段将它放在 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>

这是 Fiddle

Answer 1

试试这个。仔细看位置样式

#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;
        }