0

青い要素を緑の円の途中とその後ろに配置したいと思います。どうやってやるの？また、緑の円と青の要素の間にランダムな余白があるのはなぜですか?

ここに画像の説明を入力

#profile-circle {
    margin-right: auto; margin-left: auto;
    height: 164px; width: 164px;
    border-radius: 84px 84px 84px 84px;
}

#main-container {
    margin-right: auto; margin-left: auto;
    height: 400px; width: 450px;
}

http://jsfiddle.net/LqJ79/

4

5 に答える 5

3

position: relative ここであなたを助けます。を使用z-indexしてボックスの上に円を置くことができます。また、topwhich を使用してボックスを現在の位置に対して相対的に移動することもできます。問題position: absoluteは、フローから要素を取り除くことです。これは、ここで必要なものではないと思います。

#profile-circle {
    position: relative;
    z-index: 100;
}

#main-container {
    position: relative;
    z-index: 50;
    top: -100px;
}

デモを見る

于 2012-07-05T18:37:28.520 に答える
0

cssにないものを作成して、position: fixed; top:10px; left: 10px; z-index: 1; それらを移動できます。このような：

http://jsfiddle.net/LqJ79/

于 2012-07-05T18:41:40.043 に答える
0

属性「position: absolute;」を使用します。2 番目のボックスでは、js fiddle CSS を次のように更新しました。

#main-container {
    margin-right: auto;
    margin-left: auto;
    height: 400px;
    width: 450px;
    background-color: blue;
    position: absolute;
    top: 80px;
}
于 2012-07-05T18:37:19.910 に答える
0

青色の要素を上に移動する最も簡単な方法は、負の上マージンを設定することです。

margin-top: -82px;

ただし、現在のマークアップでは、青い要素が一番上にあります。

HTML の青い要素の下に緑の要素を配置してから、CSS を使用して上にスライドさせるか、次のことができます。

  1. position: relative;両方の要素で使用
  2. 青と緑の要素にa を設定しz-indexて、どちらが上に表示されるかを決定します (上に表示されるように、緑の要素により大きな数を与えます)
  3. top: -82px;青い要素に設定して、緑の要素の下にスライドさせます

それらの間のスペースは、マージンによるものです。

margin-top: 15px;
margin-bottom: 5px;
于 2012-07-05T18:38:46.287 に答える
0

2 つの間の「魔法の」スペースは、div ユーザー情報のマージンによるものです。CSSを次のように変更しました。

#user-info {
height: auto;
width: 380px;
margin-right: auto;
margin-left: auto;
}

これにより、スペースが削除されます。

于 2012-07-05T18:46:54.613 に答える