0

それで、これについてたくさんの質問を見てきましたが、個人的な例が欲しいです. プログラミング初心者なので、ちょっとおバカかもしれませんが…

とにかく、私は2つ<div>の s を持っています。1つは idbgで、もう1つは classplayerです。

これは次のようになります。

それはどのようなものか

赤い箱がプレイヤー、大きい画像が背景です。

プレーヤーが背景の中央から開始する必要があります。

背景は 640px X 640px です。

これは、これまでの CSS ファイルのコードです。

#bg {
    width: 640px;
    height: 640px;
    top: 0;
    left: 0;
}

.player {
    position:relative;
    background-color:#FF0000;
    width: 32px;
    height: 32px;
    top: 0px;
    left: 0px;    
}
4

3 に答える 3

0

コンテナのサイズに適応せず、コンテナを変更するにはCSSを調べてすべての絶対値を変更する必要があるため、絶対配置を避けようとしています。

私は次のことをします

CSS:

#bg {
            overflow: auto; /* stops the .player from from moving #bg down */
            width: 640px;
            height: 640px;
            background-color: blue;
            text-align: center; /* center child div in IE */
        }

        .player {
            background-color: White;
            width: 32px;
            height: 32px;
            margin: 0 auto; /* center div in parent for non IE browsers */
            margin-top: 304px; /* 50% from top minus div size */
        }

HTML:

<div id="bg">
    <div class="player"></div>
</div>

これで、子コンテナーの上マージンを追跡するだけで済みます。

于 2012-06-09T03:44:05.123 に答える
0

スタイルシートを次のように変更してみてください。

#bg {
    width: 640px;
    height: 640px;
    top: 0;
    left: 0;
    position: relative;
}

.player {
    position: absolute;
    background-color: #FF0000;
    width: 32px;
    height: 32px;
    top: 320px;
    left: 320px;    
    z-index: 1;
}

HTML は次のようになります。

<div id="bg">
    <!-- your bd code here -->
    <div class="player"></div>
</div>
于 2012-06-08T22:52:48.247 に答える
0

position: relativeオブジェクトが通常配置される場所に相対的です。あなたの例では、通常は最初の div の下に来るので、そこにとどまります。(つまりposition: relative、 の配置で使用すると0、オブジェクトはどこにも移動しません。)

を追加できtop: -320px; left: 320pxます。これにより、最初の div のスペースに配置されます。しかし、maxksbd19 の答えは、おそらく最終的な目標に対するより良い解決策です。

于 2012-06-08T22:58:23.720 に答える