Question

css假设从左侧沿着其他一些CSS3效果滑出一个标题。

但我需要从position: absolute;删除.box img。但是，当我这样做时，:hover上的.box事件似乎不再起作用。

我评论了有问题的position: absolute;。

HTML：

<div class="container">
    <div class="box">
        <img class="box-image" src="http://knyz.org/blog/content/images/2015/01/Ghost-vs-WP.png"/>
        <span class="caption scale-caption">
            <h3>Ghost vs Wordpress</h3>
            <p>What is ghost again? Ghost is a free blogging platform like WordPress. Although similar there are key differences which in my mind, make Ghost the go-to blogging platform. Just a Blogging Platform That is the most important difference. Ghost says upfront what they are about and always will be</p>
        </span>
    </div>
    <div class="box">
        <img class="box-image" src="http://knyz.org/blog/content/images/2015/01/owncloud-registration.jpg"/>
        <span class="caption scale-caption">
            <h3>OwnCloud Registration Script - Fixed!</h3>
            <p>'Bout time! I am really sorry for the long wait. I was very busy and was really not motivated to work on it after it broke for the second time. That said, you shouldn't blame me, blame ownCloud for not making it themselves! The important thing however is that now</p>
        </span>
    </div>
</div>

CSS：

.container {
    width: 500px;
}

.box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 270px;
    float: left;
    margin: 5px;
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}

.box img {
        /*
        position: absolute;/**/
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    width: 100%;
}

    /* Caption Common Style */
.box .caption {
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    position: absolute;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}

    /** Caption 3: Fade **/
.box .fade-caption, .box .scale-caption {
    opacity: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 15px;
}
    /** Caption 6: Scale **/
.box .scale-caption h3, .box .scale-caption p {
    position: relative;
    left: -200px;
    width: 90%;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.box .scale-caption h3 {
    -webkit-transition-delay: 0ms
        -moz-transition-delay: 0ms
        -o-transition-delay: 0ms
        -ms-transition-delay: 0ms
        transition-delay: 0ms;
}

.box .scale-caption p {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    transition-delay: 300ms;
}

    /** Fade Caption :hover Behaviour **/
.box:hover .fade-caption, .box:hover .scale-caption {
    opacity: 1;
}
    /** Scale Caption :hover Behaviour **/
.box:hover .box-image {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

.box:hover .scale-caption h3, .box:hover .scale-caption p {
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}

我该如何解决此问题？

Answer 1

将top: 0添加到.box .caption。 (updated example)

当img元素被绝对定位时，它会从正常流中移除，因此.caption被置于其顶部，因为它也是绝对定位的。如果从img元素中删除了绝对定位，它将再次成为流的一部分，从而要求.caption元素位于顶部。（因此，top: 0，相对于父元素。）

.box .caption {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;     /* Added */
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

Answer 2

oki dokes，看起来.caption的位置位于每个.box的可视区域下方

变化

.box img {

position: relative;
z-index:50; ...

添加

.box .caption {
    top: 0; ...

CSS - ：Hover无法在没有绝对定位的情况下工作

2 个答案: