保持div绝对且在其父级中

user3380148 发表于 Dev

用户名

我有一个带有缩略图和摘录的小链接，使用css过渡，我希望缩略图在悬停时淡出并出现摘录。我使用％来反对像素，因为我想让我的网站响应，但是当我将其添加到我的网站时，摘录由于具有绝对位置而散布在页面的整个宽度上，下面是一个小提琴，有人可以帮助我吗？

.col {
    width:29%; 
    margin:0 auto;
}
.post-thumbnail {
    position:relative;  
    float:left; 
    overflow:auto; 
    width:100%; height:278px; 
    background:#2F3B45;
}
    .post-thumbnail img {
    width:100%; height:223px; 
    padding:0; margin:0;
    transition:opacity 0.3s ease-in-out;
   -moz-transition:opacity 0.3s ease-in-out;
   -webkit-transition:opacity 0.3s ease-in-out;
   -o-transition:opacity 0.3s ease-in-out;
}
.col:hover .post-thumbnail img {
    opacity:0;
    filter:alpha(opacity=00);
}
.post-excerpt {
    width:100%;
    z-index:9999;
    opacity:1; 
    filter:alpha(opacity=1);
}
.post-excerpt p {
    text-align:justify;
    color:#a3aaac;
    font-family:'Open Sans', helvetica, arial, sans-serif;
    font-size:9pt; font-weight:200;      
    line-height:18pt;
    text-decoration:none; width:100%;
}
.col:hover .post-excerpt {
    opacity:1; 
    filter:alpha(opacity=1);
}
.post-title {
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:55px; 
    background:#ff0000; z-index:9999;
    text-align:center; line-height:52px;
}
.post-title a {
    font-family:'Open Sans', helvetica, arial, sans-serif;
    font-size:10pt; font-weight:200;  
    color:#000; text-decoration:none;
}
.post-more {
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:0px; 
    background:#ff0000;
    opacity:0.0;
    filter:alpha(opacity=00);
}
.col:hover .post-title {
    cursor:pointer;
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:95px; 
    background:#ff0000; line-height:44px;
}
.col:hover .post-more {
    cursor:pointer;
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:47px; 
    background:#fff url(http://liamhodnett.com/img/new/read-entry.png)top left no-repeat;  
    z-index:99999;
}

http://jsfiddle.net/P3k9A/

谢谢你们！

麦克阿登

将父级设置为相对，然后将子级设置为绝对。

这是我更改的内容：

.col {
    width:29%; 
    margin:0 auto;
    position:relative; /* <- here */
}
.post-thumbnail {
    position:absolute;  /* <- here */ 
    top: 0px;
    float:left; 
    overflow:auto; 
    width:100%; height:278px; 
    background:#2F3B45;
}
.post-excerpt {
    position: absolute; /* <- here */
    width:100%;
    z-index:9999;
    opacity:0; 
    filter:alpha(opacity=0);
}