position: absolute
は、親要素の左上からの位置が基準になると思っていたのですが、
下記のように要素を配置したところ、label要素の下に配置されました。
この時、top
やleft
を指定しないと、auto
扱いになるという記事があったのですが、
auto扱いとは、兄弟要素に対してrelativeのような挙動をするということでしょうか?
もしrelativeのような挙動になるようですと、<span>-----span</span>
の部分がbox1の後にくるように思うのですが、それは違うのでしょうか?
<html lang="en"> <head> <meta charset="UTF-8"> <title>css absolute</title> </head> <body> <div class="sample-rel1"> <label class="hoge">hogehoge</label> <div class="sample-abs">box1</div> <span>------span</span> </div> </div> </body> </html>
<style type="text/css"> .sample-rel1 { background: blue; color: #ffffff; height: 200px; position: relative; width: 80%; margin: 0 auto; } .hoge { width: 100px; height: 100px; background: green; position: relative; display: block; } .sample-abs { background: red; height: 150px; position: absolute; width: 200px; display: block; opacity: 0.5; color: black; } span { width: 100px; height: auto; background: yellow; color: black; } </style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/06/08 15:19
2017/06/09 02:01 編集