absoluteの上下関係

親要素、子要素共に目一杯広がると仮定すると、親要素にrelativeを指定し、その子要素にabosoluteを指定された兄弟要素を書いた場合、後に書いた方が上に来るのでしょうか？

kei344

2018/09/26 04:47

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

tanakashouzoux

2018/09/26 05:53

コメントありがとうございます！仰る通りでした????以後気負付けたいと思いますm(__)m

行動規範の内容に同意します

回答2件

ベストアンサー

z-indexに何も指定しなければ、後に書いた方が上にきます。

HTML
1<div id="outer">
2  <div id="inner1"></div>
3  <div id="inner2"></div>
4<div>

CSS
1html, body {
2  width: 100%;
3  height: 100%;
4}
5
6div {
7  width: 100%;
8  height: 100%;
9}
10
11#outer {
12  position: relative;
13  background-color: pink;
14}
15
16#inner1 {
17  position: absolute;
18  background-color: aqua;
19}
20
21#inner2 {
22  position: absolute;
23  background-color: lime;
24  top: 100px;
25}
26

投稿2018/09/26 04:52

編集2018/09/26 04:57

root_jp

総合スコア4666

tanakashouzoux

2018/09/26 05:54

わざわざご回答ありがとうございました！一応試してみてそうじゃないあかなーとは思ったのですが、何分周りに聞ける人がおらず質問させて頂きましたm(__)m ありがとうございました！

行動規範の内容に同意します

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			html, body {
8				width: 100%;
9				height: 100%;
10			}
11			#wrapper {
12				position: relative;
13				width: 100%;
14				height: 100%;
15				background: #CCC;
16			}
17			#contents {
18				position: absolute;
19				background: #00F;
20			}
21		</style>
22	</head>
23	<body>
24		<div id="wrapper">
25			<div id="contents">
26				contents
27			</div>
28		</div>
29	</body>
30</html>