「overflow: hidden」を使用して要素がコンテナをオーバーフローできるようにするにはどうすればよいですか?

特定の要素のコンテナ オーバーフロー制御

特定の高さと幅の寸法を持つコンテナがあり、overflow:hidden to という状況が発生する場合があります。境界を超える要素はすべて非表示にします。ただし、コンテナ内の特定の要素がこれらの境界を超えて拡張できるようにしたい場合もあります。

これを実現するには、overflow:hidden 要素をposition:static で保持し、オーバーフロー要素を相対的に配置するというアプローチを採用します。 (overflow:hidden の親ではなく) 上位の親が効果的であることがわかります。例:

<code class="css">.relative-wrap {
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}

.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}</code>

<code class="html"><div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow"></div>
        <div class="no-overflow"></div>
    </div>
</div></code>

この例では、.relative-wrap div は、position:relative の上位の親として機能します。 .relative-wrap 内では、.overflow-wrap div (overflow:hidden を含む) は、position:static で配置されます。次に、オーバーフロー要素 (この場合、 . respect-overflow と .no-overflow) は、 . respect-overflow ( .overflow- の境界を尊重する) の location:relative を使用して、 .relative-wrap (その親要素) を基準にして配置されます。

このアプローチにより、境界を越えてはみ出す可能性のある overflow:hidden を持つ要素をコンテナ内に含めることが効果的に可能になります。レイアウトとデザインの柔軟性が向上します。

以上が「overflow: hidden」を使用して要素がコンテナをオーバーフローできるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。