2

スクロールバー付きの div があります。その中にはさまざまな要素があり、そのうちの 1 つは display:block と position:relative; へのリンクです。このリンクの内部には、デフォルトの位置の img と、その img の上に表示されるはずの h3 タグが position:absolute で含まれています。DIV をスクロールすると、他の要素は適切にスクロールされますが、これらの要素とその内容は固定されたままです。このバグを解決する方法についてのアイデアはありますか?

ここにフィドルがあります。コードは以下のとおりです。

http://jsfiddle.net/Z987x/

<a class="slider_link" data-ident="herb-garlic-roast-tenderloin" href="http://superfadlabs.com/clients/carapelli/recipes/herb-garlic-roast-tenderloin">


  <img class="slider_image" src="http://superfadlabs.com/clients/carapelli/images/sections/recipes/share_carousel_images/tenderloin.jpg" alt="Herb &amp; Garlic Roast Tenderloin" style="
    left: 0px;
    top: 0px;
    display: block;
">

  <h4>Herb &amp; Garlic Roast Tenderloin</h4>
</a>

a.slider_link { 
    width:190px; height:220px; position: relative; display: block; margin-bottom:10px;
    h4{ .cubano; font-size:1.8em; position: absolute; color: #fff; top:11px; left:14px; line-height: 110%; padding-right:10px; height:40px; overflow: hidden; }
}
4

1 に答える 1

6

手っ取り早い修正方法は、プロパティposition:relative;を使用してコンテナーに追加することです。overflow:auto;

ただし、絶対位置/相対位置に依存せず、可能であればフロートを使用するようにレイアウトを再考することを検討することを強くお勧めします。

更新された jsfiddle: http://jsfiddle.net/Z987x/1/

于 2012-12-21T20:45:06.567 に答える