2月17日授業内容①(positionについて)

f:id:paris1204:20160217234108p:plain

 

今日は、授業でPositionについて勉強しました。

参照先:

 

yachin29.hatenablog.com

yachin29.hatenablog.com

本:P146〜P155

 

子要素の基準点を決める時は親要素にposition:relative;を入れる。
 
z-indexは重なっている要素の上下の順番を変えることができる。
  • positionをかけていないと機能しない。
  • 重なっているものすべてに下から何番目に該当するかの記述が必要。
  • 順番になってよければ良く極端に数値が離れていても問題はない。
ex,3つ少しずつ重なっているものがある場合一番下を1、2番目を5、3番目を9999というな記述をしても機能する。

 

*通常だと記述順に表示されるのでz-indexを設定しないと以下のようになる。

f:id:paris1204:20160218002930p:plain

 

z-indexを設定すると以下のようになる。

f:id:paris1204:20160218002939p:plain

 

5番はfixedにしているのでスクロールしてもついてくる。

 

f:id:paris1204:20160218002943p:plain

 

入力内容

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
html,body,div{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;
}
a{text-decoration:none;}
ul{list-style:none;}

body{font-size:16px;
background:#61B9E8;
height:3000px;}


#container{width:600px;
height:600px;
background:#FFFFFF;
margin:0 auto;
position:relative;
top:0;
left:0;}

 

div.box{width:100px;
height:100px;}

 


div.one{background:#DAE040;
position:absolute;
top:0;
left:0;
z-index:10;}

div.two{background:#E7686A;
position:absolute;
top:50px;
left:50px;
z-index:5;}

div.three{background:#54E97A;
position:absolute;
top:100px;
left:100px;
z-index:1;}

div.four{background:#CF80EC;
position:relative;/*#containerにposition:relative;を設定した状態で個別で設定した場合はそのものがある位置から見て上下左右に動く数値を考える必要がある*/
top:500px;
left:500px;}

div.five{background:#6963E4;
position:fixed;/*固定ができるが、基準位置がbodyのleft,topになる。スクロールしてもついてくる。*/
top:100px;
left:300px;}


</style>

</head>

<body>
<div id="container">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>

 

</div>

</body>
</html>

 

以下は1番上に載せているcafemenuの記述です。

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="cafemenu.css">
<title>patisserie camelia</title>
</head>

<body>
<div id="container">

<div id="header">

<ul>
<li id="info"><a href="#">Infomation</a></li>
<li id="menu"><a href="#">Menu</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="mail"><a href="#">Mail</a></li>
</ul>
<p><img src="img/logo.gif" alt="イメージボックス"></p>/*ここはh1にした方が構成的に良い(先生の解答例を参照)*/

</div><!--#header-->

<div id="image-box">
<ul>
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン"></li>
<li id="ph1"><img src="img/photo01.jpg" alt="プリン"></li>
<li id="ph2"><img src="img/photo02.jpg" alt="ショートケーキ"></li>
<li id="ph3"><img src="img/photo03.jpg" alt="ワッフル"></li>
<li id="ph4"><img src="img/photo04.jpg" alt="コーヒー"></li>
<li id="ph5"><img src="img/photo05.jpg" alt="ろうそく"></li>
<li id="ph6"><img src="img/photo06.jpg" alt="チーズケーキ"></li>
<li id="ph7"><img src="img/photo07.jpg" alt="イチゴヨーグルト"></li>
<li id="ph8"><img src="img/photo08.jpg" alt="みかんヨーグルト"></li>
<li id="ph9"><img src="img/photo09.jpg" alt="シャンデリア"></li>
<li id="ph10"><img src="img/photo10.jpg" alt="コーヒー"></li>

</ul>

</div><!--#image-box-->

 

 

 

 

@charset "utf-8";
/* CSS Document */

html,body,div,p,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;
}
a{text-decoration:none;}
ul{list-style:none;}

body{font-size:16px;
background:#553a1a;
height:3000px;}

#container{width:900px;
height:400px;
margin:200px auto;
background:white;}

#header{width:280px;
float:left;
padding:10px;}

#header ul{
margin:40px 0 0 20px;
overflow:hidden;
white-space:nowrap;
text-indent:100%;}

#header ul li{height:25px;}

#header ul li a{display:block;}

#header ul li#info{background:url(img/info.gif) no-repeat 0 0;}

#header ul li#info a{background:url(img/info.gif) no-repeat 0 0;}

#header ul li#info a:hover{background:url(img/info_h.gif) no-repeat 0 0;}

 


#header ul li#menu{background:url(img/menu.gif) no-repeat 0 0;}

#header ul li#menu a{background:url(img/menu.gif) no-repeat 0 0;}

#header ul li#menu a:hover{background:url(img/menu_h.gif) no-repeat 0 0;}

 

 

#header ul li#access{background:url(img/access.gif) no-repeat 0 0;}

#header ul li#access a{background:url(img/access.gif) no-repeat 0 0;}

#header ul li#access a:hover{background:url(img/access_h.gif) no-repeat 0 0;}

 


#header ul li#mail{background:url(img/mail.gif) no-repeat 0 0;}

#header ul li#mail a{background:url(img/mail.gif) no-repeat 0 0;}

#header ul li#mail a:hover{background:url(img/mail_h.gif) no-repeat 0 0;}


#header p{
margin:100px 0 0 20px;}

#image-box{width:480px;
height:400px;
float:right;}


/*#image-box のindividual*/

#image-box{position:relative;}
#image-box ul li{position:absolute;}


#camp{top:-20px;
right:-15px;
}

#ph1{top:80px;
right:0;}

#ph2{bottom:0;
left:80px;}

#ph3{top:0;
left:0;}

#ph4{bottom:80px;
right:0;}
#ph5{top:0;
left:160px;}

#ph6{top:160px;
left:160px;}

#ph7{top:80px;
left:240px;}

#ph8{bottom:80px;
right:160px;}

#ph9{bottom:0;
right:80px;}

#ph10{top:160px;
left:0;}