人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSについての質問です。

やりたいこと:
画像にあるようなレイアウトにしたい。

-----
現状では?の位置(下限に配置)ができていません。

?は最背面。背景

?は固定幅。

?の次に来るものを右に回り込ませて?を表示している。float

んで、?は?の中で右寄せで一番上に表示したい。
?は?の中で右寄せで一番下に表示したい。
ただし、?の長さに合わせる。
?のほうが短い場合は想定しない。

--------

position:absolute;
bottom:1px;
とかで?を下から表示させることはできたんですが
absoluteのため回り込んでくれません。


わかりにくい説明で申し訳ございませんが
わかるかたいらっしゃいましたらお願いします。

1149081574
●拡大する

●質問者: e23jp
●カテゴリ:インターネット ウェブ制作
✍キーワード:absolute CSS レイアウト 画像
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● wizemperor
●25ポイント

どこにどういったものが入るのかがわかりませんが、既に途中まで来ているとのことなので、それに沿う形で回答させていただきます。

?のほうが短い場合は想定しない。とありますので、

?に、



position:absolute;

bottom:1px;

right: 1px;



と右端からの位置を指定してやればよいかと思います。

既に指定されているかとは思いますが、?には「position: relative;」を指定します。


?も同様に、


position:absolute;

top: 1ox;

right: 1px;


で良いかと思います。

ただし、?にテキストが入る場合には、各ボックスの高さによって重なってしまうため、別の方法にしたほうがよいと思います。


2 ● doraemoon
●20ポイント

z-index: 0;

というのを加えるのはどうでしょう。

それぞれの要素で『0』の部分を変えて1とか2とか3をいれると、

数字が大きい要素ほど前面にでます。

重ね合わせの優先度を指定してます。

マイナスの数字はいれない方がいいと想います。

この場合でしたら、それぞれの要素につける数字は

?<?<?=?<?=?

という大小関係にして、鉛直方向に要素の位置づけをします。

あとは回り込みとか右寄せとかで水平方向に位置づければいいと想います。

ご質問の意図を理解していない解答だったらごめんなさい。

実際のhtmlファイルがアップされていると幾分ましな解答ができるかもしれません。


3 ● tezcello
●35ポイント ベストアンサー

このようにしたら上手くいっているみたいです。

1: 背景画像と全体幅

2: 左マージン、幅、position:relative

3: 幅、float:left

4: 上マージン、float:left

5: position: absolute; top: 0px; right: 0px;

6: position: absolute; bottom: 0px; right: 0px;

それと

dmy クラス clear: left;

を用意して、

<div class="dmy"></div>

中身の無いブロックを追加しました。float をクリアしておかないと、mozilla系では3が2からはみ出してしまうようです。

4の上マージンは5との重なりを防ぐ為です。

5の要素が何か分かりませんが、4のサイズが分っていない場合は、

4,5を収めるブロックを用意して、5->4の順に記述した方が良いと思います。

◎質問者からの返答

あー できましたー

ありがとうございました。

問題は2のrelativeの指定をしていなかったことと、right:0px;の指定を忘れていたことでした。

回り込みがあるのでright指定が不要と思い込んでいたみたいです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ