html - divの外で何かを取得する

Question

言葉でこれを尋ねる方法がわからないので、画像を投稿します。

したがって、画像にはメインの div があり、それを「赤」と呼びましょう。

「赤」の中には、div「緑」と呼ばれる別のものがあります。

「緑」の中には がありul、いくつかのli要素には下線が必要ですが、その下線は div の外に出る必要があるため、コード内で「緑」の外にその行を取得することが問題です。 、中にあります。

これを達成するためのある種のオーバーフロー設定またはテクニックがあるかもしれないと推測しています。

要約すると、div 内から何かを取得し、その外にも表示する必要があります。

できる限りグーグルで検索しようとしましたが、質問の仕方がわからないためか、自分に合ったものを見つけることができませんでした.

Answer 1

これをオーバーフローで解決することはできません。あなたがする必要があるのは、ul内側の緑をに設定しposition: absolute、赤いボックスをに設定することposition: relativeです。

私はそれのためにjsfiddleを作りました（私の最初）。

Answer 2

それは状況次第です。それが固定サイズの要素であり、何をしても常に同じサイズである場合: として配置red divしrelative、次に絶対green divとして配置absoluteします。ulこれにより、要素を移動できます。相対的に赤のdiv。ウィンドウのサイズに合わせて要素を引き延ばすのは難しくてうまくいきますがmargin-left、クロスブラウザ化が難しいので注意が必要です。margin-topfloat:left

Answer 3

要件に応じてデモを参照してください:- DEMO

HTML

<div class="red">
<div class="green">
  <ul>
    <li>loreum</li>
    <li>loreum</li>
        <li>loreum</li>
    <li>loreum</li>
  </ul>
  </div>

</div>

CSS

.red {
width:300px;
height:300px;
background:red;  
}

    .green {
        float: right;
        height: 200px;
        margin: 30px 30px 0;
        width: 200px;
    background:green;
    }

    .green ul {
        left: 8px;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 200px;
    }

    .green ul li {
    list-style-type:none;
    display:block;
    border-bottom:1px solid white;
      text-align:right;
    }

Answer 4

緑色の div には「overflow : hidden」(css) を使用します