要素のウィンドウ内の位置を定める - Bootstrapのチュートリアル

このレッスンでは要素の ウィンドウ内における垂直位置を定めます。 今開いている このページなんですけど 上の方にカラムが３つ、 １つの行 row の中に入っています。 あとは画像ですね。 ペンギンの画像があって、その下に 文章が打ってあるんですが これは意味のない文章です。 ただ単にあたりとして 入れてあります。 一番上のこの container に入った 行とカラムが入ってるわけですけど この container に対して 垂直位置、 ウィンドウ内における垂直位置を 定めたいと思います。 ですからこの container-fluid のクラスに 追加をするんですけど、 まずは画面の下に固定します。 fixed-bottom と いうふうにしますと 画面の下の方に 移ります。 そして固定ですのでスクロールしても このカラム３つは位置が動かないんですね。 一旦これを削除しましょう。 bottom があるから top があるだろう、と。 あります。 fixed-top そうすると元々トップにあるんですが 固定になるものですから 背景画像が上に上がって 全体が上に上がっています。 そしてこれもやはり固定です。 ということですので スクロールをしても 位置が動かない ということになります。 もう１つ sticky-top というのをご紹介したいんですけど これはちょっと一番上にあったのでは 違いがわかりにくいので 位置を移します。 fixed-top を外して そしてこの div 要素、 container の設定された div 要素ですね。 これを画像の下に持っていきます。 そうするとこうなりますね。 その上で先ほど言いました クラスですけど、ここに sticky-top というふうにします。 ただこれ Dreamweaver の ライブビューではちょっと確認ができないので 保存をして ブラウザーで確認します。 ３つのカラムはこのペンギンの画像の 下にあるのでまだ見えてきませんけど スクロールをしますと 現れてきます。 この辺までは変わらないですね。 この上に行った時 ちょっとご注目ください。 さらに下にスクロールすると 隠れないんですね。 常に上に固定されて 隠れてしまわない。 上にくっつくということで sticky-top という名前がついています。 ただし…