html - 別のdivの下のdiv

Question

cssを使用すると、絶対位置を使用せずにdivを別のdivの下に配置できますか？

私はこれらの2つのdivを持っていますが、不透明度が黄色のdivの真下に白一色のdivを表示したいと思います（ただし、輪郭の隅の隅には直接表示しません）。

これはどのように達成できますか。z-index私は相対的なポジショニングを試してきましたが、役に立ちませんでした。

ありがとう http://jsfiddle.net/loren_hibbard/WtGsv/

score 3 · Accepted Answer

ポジショニングを使用せずに、負のマージンを使用してコンテンツdivにスタイルを追加しました。

.content {
    margin-top:-100px;
}

ここでの作業デモ：http：//jsfiddle.net/WtGsv/3/

.fixed_widthただし、 divを格納するdivにIDを追加し、.contentそのidを使用して負のマージンを与えることをお勧めします。そうすれば、親divは子divではなく、負のマージンを持ちます。

ただし、絶対測位を使用する場合は、ここでjsfiddleを更新しました：http： //jsfiddle.net/WtGsv/12/

基本的に、position:relative;使用する他の2つのdivの周りに親divを追加しますposition:absolute;

score 2 · Accepted Answer

Yuuはposition: relative; top -100px、http：//jsfiddle.net/WtGsv/1/を使用できます

または、負のマージンを使用できますmargin-top: -100px http://jsfiddle.net/WtGsv/5/

どちらのソリューションでも、下部のdivは元の場所にスペースを取ります

divを動的に追加しても、絶対位置に配置できなくなるわけではありません。親を相対位置に配置するだけで、動的絶対位置のdivが目的の場所に挿入されますhttp://jsfiddle.net/ WtGsv / 10 /

score 1 · Accepted Answer

マークアップを書き直す必要があると思います。これは非常に簡単です。これを認識しているかどうかはわかりませんが、relative負のマージンは必要ないので、divを取得して配置されたコンテナーに配置できます。

デモ

HTML

<div class="wrap">
    Add a line item
    <div class="inner_wrap"><textarea></textarea></div>
</div>

CSS

body {
    background-color: #aaaaaa;
}

.wrap {
    border: 4px dashed #ff0000;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-family: Arial;
    position: relative;
}

.inner_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #919191;
    top: 0;
}

score 0 · Accepted Answer

両方を親div内に配置し、幅が黄色のボックスの幅と等しくなるように設定すると、デフォルトでは、白いボックスが真下に配置されます。

score 0 · Accepted Answer

一番上にしたいdivを下に置きたいdivの内側に配置し、一番上に配置したいdivを親の内側に配置できます。

HTMLの例：

<div id="bottom">
    lorem ipsum

    <div id="top">
        hello world
    </div>

</div>

CSS：

#bottom {
    background:red; /* to see dimensions */
    position:relative;
}

#top {
    background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

これがJSfiddleです。

score 0 · Accepted Answer

私はこのようにしました

.mainUnderline{
    height:8px;
    background-color:yellow;
    margin-top:-15px;
}   

.header{
    width:400px;
    text-align:center;
    font-weight:900;
    font-size:30px;
    color:black;
    padding-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
}

<div class="header">
 “See line under me”
  <div class="mainUnderline"></div>
</div>

html - 別のdivの下のdiv

6 に答える 6

Related

Reference