<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/*div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 10px;
left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.box3{
background-color: blue;
}
span{
position: relative;
width: 100px;
height: 100px;
background-color: red;
}*/
/*input{
width: 150px;
height: 50px;
}
img{
width: 150px;
height: 50px;
position: relative;
top: 20px;
}*/
/*div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: absolute;
top: 0px;
right: 0px;
}
.box3{
background-color: blue;
}
span{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}*/
/*.box1{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
position: relative;
position: fixed;
position: static;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
position: relative;
position: fixed;
}
.box3{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
}*/
/*.box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
bottom: 0;
right: 0;
}
.box2{
width: 2000px;
height: 100px;
background-color: blue;
}
.box3{
width: 100px;
height: 2000px;
background-color: green;
}*/
/*.box{
width: 300px;
height: 300px;
background-color: red;
border: 5px solid;
box-sizing: border-box;
padding-left: 30px;
padding-top: 20px;
position: absolute;
}
.box1{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0px;
top: 0px;
}*/
/*ul{
width: 800px;
height: 50px;
background-color: #CCC;
margin: 0 auto;
list-style: none;
margin-top: 100px;
}
ul li {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
}
ul li:nth-of-type(4){
background-color: yellow;
position: relative;
}
ul li img{
width: 15px;
height: 15px;
position: absolute;
left: 40px;
top: -10px;
left: 50%;
margin-left: -7.5px;
}*/
/*div{
width: 300px;
height: 300px;
border: 2px solid #ccc;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
div .image01{
width: 300px;
height: 200px;
}
div .image02{
width: 45px;
height: 44px;
position: absolute;
left: 0;
top: 0;
}
div .image03{
width: 134px;
height: 42px;
position: absolute;
left: -7px;
top: 163px;
}*/
/*div{
width: 520px;
height: 280px;
border: 2px solid gold;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
div img{
width: 520px;
height: 280px;
}
div span{
width: 40px;
height: 80px;
background-color: rgba(0, 0, 0, 0.5);
line-height: 80px;
text-align: center;
font-size: 24px;
position: absolute;
}
div .leftArrow{
left:0;
top: 100px;
}
div .rightArrow{
right:0;
top: 100px;
}
ul {
list-style: none;
width: 200px;
height: 40px;
position: absolute;
bottom: 10px;
right: 10px;
}
ul li {
width: 40px;
line-height: 40px;
float: left;
text-align: center;
border: 1px solid gold;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.5);
}*/
/*div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: fixed;
}
.box3{
background-color: blue;
}
.box4{
height: 2000px;
background-color: yellow;
}*/
/*.nav {
width: 100%;
height: 45px;
background: url("../image/call.jpeg") no-repeat center top;
background-color: red;
position: fixed;
}
.content{
width: 100%;
height: 2000px;
background-color: green;
}
div img:first-child{
width: 100px;
height: 80px;
position: fixed;
top: 200px;
left: 0;
}
div img:last-child{
width: 100px;
height: 80px;
position: fixed;
top: 200px;
right: 0;
}
a{
width: 45px;
line-height: 45px;
text-align: center;
position: fixed;
bottom: 100px;
right: 10px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.5);
}*/
/*.father1{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 150px;
z-index: 3;
}
.son1{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 350px;
top: 200px;
}
.father2{
width: 300px;
height: 300px;
background-color: green;
position: fixed;
top: 150px;
left: 150px;
z-index: 2;
}
.son2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 100px;
left: 350px;
}
.father3{
width: 300px;
height: 300px;
background-color: brown;
}
.son3{
width: 100px;
height: 100px;
background-color: pink;
}*/
</style>
</head>
<!-- <body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<span>I am span.</span> -->
<!-- <input type="text" name="" value="">
 -->
<!-- <div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div> -->
<!-- <div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div> -->
<!-- <div class="box">
<div class="box1">
</div>
</div> -->
<!-- <ul>
<li>服裝城</li>
<li>美妝店</li>
<li>京東超市</li>
<li>全球購
</li>
<li>閃購</li>
<li>團購</li>
<li>拍賣</li>
<li>金融</li>
</ul> -->
<!-- <div class="">
<p>哎呦呦，真好看，真好玩</p>
</div> -->
<!-- <div class="">
<span class="leftArrow"><</span>
<span class="rightArrow">></span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div> -->
<!-- <div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div> -->
<!-- <div class="nav">
</div>
<div class="content">
</div>
<a href="#">返回</a> -->
<!-- <div class="father1">
<div class="son1">
</div>
</div>
<div class="father2">
<div class="son2">
</div>
</div>
<div class="father3">
<div class="son3">
</div>
</div> -->
</body>
</html>
第146課 定位
1、定位流分類
1.1相對定位
1.2絕對定位
1.3固定定位
1.4靜態定位
相對定位：相對于自己以前在標準流中的位置來移動
{
position:relative;
top:20px;
//left right bottom
}
相對定位是不脫離標準流的，會繼續在標準流中的占用一份空間
第147課 相對定位注意點
1、相對定位是不脫離標準流的，會繼續在標準流中的占用一份空間
2、在相對定位中同一個方向上的定位屬性只能使用一個
3、由于相對定位是不脫離標準流，所以在相對定位中是區分 塊級元素／行內元素／行內塊級元素
4、由于相對定位是不脫離標準流，并且相對于定位元素會占用標準流中的位置，
所以當給相對定位的元素設置margin／padding等屬性時會影響標準流的布局
也就是margin／padding會在未發生相對定位的位置添加，
同時相對定位會在添加margin／padding后重新定位
相對定位應用場景
1、用于對元素進行微調
2、配合后面學習的絕對定位來使用
第148課 絕對定位
絕對定位：相對于body來定位
{
position: absolute;
top: 0px;
right: 0px;
}
注意點：
1、絕對定位的元素是脫離標準流的
2、絕對定位的元素是不區分塊級元素／行內塊級元素／行內元素的，均可設置width、height
第149課 絕對定位參考點
規律
1、默認情況下所有的絕對定位的元素，無論有沒有祖先元素，都會以body作為參考點
2、如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流，
那么這個絕對定位就會以定位流的那個祖先元素作為參考點
2.1只要是這個絕對定位元素的祖先元素都可以
2.2指定的定位流包含：相對定位／絕對定位／固定定位，不包含靜態定位
2.3就近元素作為參考點
第150課 絕對定位注意點
1、如果一個絕對定位的元素是以body作為參考點，那么其實是以網頁屏幕的寬高作為參考點，
而不是以整個網頁的寬度和高度作為參考點
2、一個絕對定位的元素會忽略祖先元素的padding
第151課 絕對定位子絕父相
相對定位弊端：不會脫離標準流，會繼續在標準流中占用一份空間，所以不利于布局界面
絕對定位弊端：默認情況下絕對定位的元素會以body作為參考點，
所以會隨著瀏覽器屏幕的寬高的變化而變化
避免兩者弊端，標簽處添加小標
子絕父相：子元素用絕對定位，父元素用相對定位
第152課 絕對定位-水平居中
1、只需要設置絕對定位元素的left：50%；
2、設置絕對定位元素的margin-left：負的絕對定位元素的寬度的一半
第153課 定位練習-團購界面
0 = 0px 當值為0時，可以省略px
當一個元素蓋在另一個元素上，一定要想到定位流，同時想到子絕父相
當用到精靈圖時，選擇作為背景圖片
第154課 定位練習-焦點圖
一個練習
第155課 定位流-固定定位
固定定位和背景關聯方式很像，
背景定位可以讓背景圖片不隨著滾動條的滾動而滾動,background-attachment: fixed;
而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動,position:fixed;
注意點：
1、固定定位的元素是脫離標準流的，不會占用標準流中的空間
2、固定定位和絕對定位一樣不區分行內元素／塊級元素／行內塊級元素
第156課 定位練習-新浪首頁
圖片堆積而成，沒有圖片使用自己圖片代替
第157課 定位流-z-index 屬性
1、IE瀏覽器不支持默認定位
2、一個元素默認情況下就是靜態定位
3、z-index
默認情況下所有的元素都有一個默認的z-index屬性，取值是0.
z-index屬性的作用是專門用于控制定位流元素的覆蓋關系的
1、默認情況下定位流的元素會蓋住標準流的元素
2、默認情況下定位流的元素后面編寫的會蓋住前面編寫的
3、如果定位流的元素設置了z-index屬性，那么誰的z-index屬性比較大，誰就顯示在上面
注意點
從父現象
1、如果兩個元素的父元素都沒有設置z-index屬性，
那么誰的z-index屬性比較大誰就顯示在上面
2、如果兩個元素的父元素設置了z-index屬性，誰的父元素的z-index屬性比較大誰就顯示在上面
