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

重新定位CSS滑出效果

1 个答案: