特定のタグが Overflow:hidden を無視するようにするにはどうすればよいですか?

特定のタグがオーバーフロー:hidden をオーバーライドできるようにする方法

コンテナ内の要素を操作するとき、特定のタグが必要な状況に遭遇することがあります。要素を使用してコンテナの境界を突破し、基本的に overflow:hidden プロパティをオーバーライドします。 HTML と CSS を使用してこれを実現する方法は次のとおりです。

特定のタグが overflow:hidden ルールを無視できるようにするには、別の親要素を使用してオーバーフロー要素を配置する必要があります。 overflow:hidden を持つコンテナには、position:static が必要ですが、オーバーフロー要素は上位の親を基準にして配置されます。この設定により、コンテナ内の他の要素に影響を与えることなく、オーバーフロー要素が親の境界をエスケープできるようになります。

次の HTML および CSS コードを考えてみましょう。

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

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

この例では、 , .overflow-wrap div の高さと幅は 250px で、overflow:hidden です。つまり、境界の外側にはみ出したコンテンツは非表示になります。ただし、絶対的に配置される .no-overflow div は、position:relative を持つ .relative-wrap div を参照して配置されるため、.overflow-wrap div を超えて拡張することができます。一方、. respect-overflow div は、.overflow-wrap div に対して相対的に配置され、overflow:hidden ルールを尊重し、その境界内に含まれます。

この手法を使用すると、表示される要素を作成できます。コンテナ内の他の要素の配置やオーバーフローのプロパティに影響を与えることなく、コンテナから抜け出すため。

以上が特定のタグが Overflow:hidden を無視するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。