div를 절대적으로 유지하면서 부모를 유지합니다.

Question

저는 CSS 전환을 사용하여 작은 이미지와 발췌 부분이있는 작은 링크가 있습니다. 마우스를 올리면 축소판이 나타나고 발췌 부분이 나타납니다. 나는 내 웹 사이트를 응답 성으로하고 싶을 때 픽셀을 반대하는 %를 사용하고 있습니다. 그러나 내 사이트에이를 추가 할 때 발췌가 페이지의 너비에 퍼져 있기 때문에 절대 위치가 jfiddle이므로 아무도 도와 줄 수 있습니까?

.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/

고마워!

Answer 1

parent를 relative로 설정 한 다음 children을 absolute로 설정하십시오.

는 여기에 내가 변경 한 것들이다 : http://jsfiddle.net/P3k9A/1/

(나는 또한 바이올린의 발췌에 0으로 불투명도를 변경) :

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

난이 후 무엇인지 믿습니다.