cssにて、relative と absolute がうまく動きません。

Question

postion:relative;とpostion:absolute;を使い、２つの<div>を重ねたいです。

        <div id="fade" style="postion: relative; top:0px; left:0px; width:100%; height:100%; opacity:0.5; background-color:#000000;"></div>
<div id="box" style="positon: absolute; text-aling: center; margin-left:auto; margin-right:auto; top:10px; height:75%; width: 40%; border: 3px solid gray; border-radius: 35px;"></div>

id="fade"の上にid="box"を重ねたいです。
しかし、fadeの下にboxが表示され、全く重なっていません。
どこを改善したら良いでしょうか？
よろしくお願いします。

Answer 1

こんばんわ

おそらくやりたいこととしては下記のコードのような感じでしょうか？

<div id="fade" style="postion: relative; top:0px; left:0px; width:100%; height:100%; opacity:0.5; background-color:#000000;">
<div id="box" style="positon: absolute; text-aling: center; margin-left:auto; margin-right:auto; top:10px; height:75%; width: 40%; border: 3px solid gray; border-radius: 35px;"></div>
</div>

Comments

[退会済みユーザー]

ありがとうございます！
できました！

Answer 2

<div id="fade" style="position: relative; top:0px; left:0px; width:100%; height:100%; opacity:0.5; background-color:#000000;">
    <div id="box" style="position: absolute; text-aling: center; margin-left:auto; margin-right:auto; top:10px; height:75%; width: 40%; border: 3px solid gray; border-radius: 35px;"></div>
</div>

こうすればよいのでは？
あと、
postion: relative; ⇒ position: relative;
positon: absolute; ⇒ position: absolute; です。

---

こう書いたほうが見やすいかも。（不要な要素を削除しています）

<div id="fade">
	<div id="box"></div>
</div>

#fade {
	background-color: rgba( 0, 0, 0, .5 );
	height:100%;
	position: relative;
}
#box {
	border-radius: 35px;
	border: 3px solid gray;
	height:75%;
	margin: 0 auto;
	position: absolute;
	text-aling: center;
	top: 10px;
	width: 40%;
}

Comments

[退会済みユーザー]

ありがとうございます！
できました！

[退会済みユーザー]

追加でお聞きしたいのですが、重なったのはいいのですが、absoluteのtopやleftの値を設定しても、そのように表示してくれません。relativeのほうは動くのですが...

[kei344]

下記は修正されましたか？
postion: relative; ⇒ position: relative;
positon: absolute; ⇒ position: absolute;

[退会済みユーザー]

二つ目のiを直していませんでした。お恥ずかしいです。
何度もありがとうございます。

[退会済みユーザー]

うまくいきました。

[kei344]

デベロッパーツールを使うと要素に当たっているCSSが確認できますので、HTML/CSSを組むときには利用されることをお勧めします。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

[退会済みユーザー]

ありがとうございます。
勉強してみます。