html - ブラウザ画面縮小時にdivが動かないようにする

Question

ブラウザー ウィンドウのサイズを変更すると、div 要素が左に移動しますが、それを行うときに 1 つの場所にとどまることを望みます。ブラウザ ウィンドウのサイズを変更している間、div 要素を 1 か所にとどめるにはどうすればよいですか?

<div style="background:red; width:30px; height:30px">

</div>

Answer 1

<div style="background:red; width:30px; height:30px position: absolute;
            top:/* pixels from top of screen*/ 30px;
            left:/* pixels from left side of screen*/100px;">

</div>

Answer 2

vertical-align,padding,position プロパティ プロパティを使用します。 Position プロパティについては、次のリンクを参照 してくださいここにリンクの説明を入力して ください Padding プロパティについては、次のリンクを参照して くださいリンクの説明をここに入力してください

<div style="background:red; width:30px; height:30px;vertical-align:top;padding:0px 0px 0px 0px">
</div>

Answer 3

必要なものを実現するためのオプションがいくつかありますが、どれを使用するかはコードの残りの部分によって異なります。

コンテナを絶対に配置することもできますが、その場合、それらの div を含む親要素にも非静的配置が定義されていることが非常に重要です。これを実現する最も一般的な方法の 1 つは、親要素への相対位置を定義してから、内部要素を絶対位置に配置することです。

ここに例があります。

HTML

<div class="wrapper">
    <div class="div_1">
        <!-- DIV 1 content -->
    </div>
    <div class="div_2">
        <!-- DIV 2 content -->
    </div>
</div>

CSS

.wrapper {
    position:relative;
}

.div_1 {
    position:absolute;
    top:10px;
    left:20px;
}
.div_2 {
    position:absolute;
    bottom:10px;
    left:20px;
}