純粋な CSS で DIV サスペンションを実装するサンプルコード (固定位置)

DIV フローティング効果 (固定位置) は CSS のみで実装されており、IE8、360、FireFox、Chrome、Safari、Opera、Maxthon、Sogou、The World などの一般的なブラウザと互換性があります。効果は以下のとおりです。

実装コード:

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1" />
<title>DIV サスペンションの例 - 純粋な CSS 実装</title>
<スタイル タイプ="text/css">
/*高さを設定すると、上下にスクロールできます*/
体 {
高さ: 1800ピクセル;
背景:#dddddd;
}

/*div 一般的なスタイル*/
div{
背景: #1a59b7;
色:#ffffff;
オーバーフロー: 非表示;
zインデックス: 9999;
位置: 固定;
パディング:5px;
テキスト配置:中央;
幅: 175ピクセル;
高さ: 22px;
左下の境界線の半径: 4px;
右下の境界線の半径: 4px;
左上の境界線の半径: 4px;
右上の境界線の半径: 4px;
}

/*右上隅*/
div.right_top{
右: 10px;
上: 10px;
}

/*右下隅*/
div.右下{
右: 10px;
下: 10px;
}

/*画面中央*/
div.center_{
右: 45%;
上位: 50%;
}

/*左上隅*/
div.left_top{
左: 10px;
上: 10px;
}

/*左下隅*/
div.left_bottom{
左: 10px;
下: 10px;
}
</スタイル>
</head>
<本文>
<div class="right_top"> 私は右上隅に浮かんでいるdivです</div>
<div class="right_bottom"> 私は右下隅に浮かんでいる div です</div>
<div class="center_"> 私は画面の中央に浮かんでいるdivです</div>
<div class="left_top"> 私は左上隅に吊り下げられた div です</div>
<div class="left_bottom"> 私は左下隅に吊り下げられた div です</div>
</本文>
</html>

これで、純粋な CSS (固定位置) で DIV サスペンションを実装するサンプルコードに関するこの記事は終了です。より関連性の高い CSS DIV サスペンションのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML でフロートをクリアする 2 つの方法

>>: JavaScript 構造化代入の詳細な説明