position屬性值的定義
static：默認值。沒有定位，元素出現在正常的流中。
relative：相對定位，通過top,bottom,left,right的設置相對于其正常位置進行定位。可通過z-index進行層次分級。
absolute：絕對定位，相對于static定位以外的第一個父元素進行定位。可通過z-index進行層次分級。
fixed：絕對定位(固定位置)，相對于瀏覽器窗口進行定位。可通過z-index進行層次分級。
1. fixed: 固定定位
1）. 參照物：瀏覽器窗口
2）. 元素脫離文本流，飄起來 不占空間，下方元素串上來 。
常用場景：頂部和底部導航欄固定。
2. relative: 相對定位
1）. 參照物：自己原來的位置
2）. 元素不脫離文本流，原來的位置還在
常用場景：和absolute配合，用于父子定位。
3. absolute: 決定定位
1）. 參照物：父級定位元素
2）. 元素脫離文本流，飄起來 不占空間，下方元素串上來
4. 父子定位， 子絕父相
z-index: 控制定位元素的層次
綜合練習1：
光標懸停后效果：
HTML
~~~
<div id="p">
<div id="c"></div>
<div id="c2"></div>
</div>
~~~
CSS
~~~
#p
{
width:570px;
height: 350px;
background-image: url(img/IMG_0227.jpg);
position:relative;
}
#c
{
width:300px;
height: 120px;
background-color: white;
opacity:0.8;
position:absolute;
left:135px;
bottom:50px;
}
/**
* display: none:不顯示
* block:以塊級元素顯示
* inline:以行級元素顯示
*/
#c2
{
width:450px;
height: 300px;
background-color: white;
position:absolute;
left:60px;
top:25px;
display: none;
}
#p:hover
{
opacity:0.5;
}
#p:hover>#c2
{
display: block;
}
~~~
display:inline-block的使用
綜合練習2：
HTML
~~~
<div id="pppp">
<img src="img/IMG_0227.jpg" />
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
~~~
CSS
~~~
#list>li
{
width:20px;
height:20px;
background-color: deepskyblue;
border-radius: 10px;
list-style: none;
display: inline-block;
margin-right: 10px;
}
#list>li:hover
{
background-color: dodgerblue;
}
#pppp
{
position:relative;
width:570px;
}
#list
{
position:absolute;
right:0px;
bottom:0px;
}
~~~
綜合練習3：
HTML
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/weipinhui2.css" />
</head>
<body>
<div id="wrapper">
<img src="img/today_DDp.png" />
<div>
<div class="item">
<img src="img/zhuanshu_02.jpg" />
<div class="subdiv">
<div>
<img src="img/1662312010-5.jpg.webp" />
</div>
<div>
<img src="img/5b7b4f0a-01f3-43ce-99b3-670cdde9af2b_5t.jpg.webp" />
</div>
<div>
<img src="img/d3586e85-b189-4c08-a81a-8905bae871ae_5t.jpg.webp" />
</div>
</div>
</div>
<div class="item">
<img src="img/top_02.jpg" />
<div class="subdiv">
<div>
<div class="bgicon" id="bg1"></div>
<img src="img/1662312010-5.jpg.webp" />
</div>
<div>
<div class="bgicon" id="bg2"></div>
<img src="img/5b7b4f0a-01f3-43ce-99b3-670cdde9af2b_5t.jpg.webp" />
</div>
<div>
<div class="bgicon" id="bg3"></div>
<img src="img/d3586e85-b189-4c08-a81a-8905bae871ae_5t.jpg.webp" />
</div>
</div>
</div>
<div class="item">
<img src="img/she_02.jpg" />
<div class="subdiv">
<div>
<img src="img/1662312010-5.jpg.webp" />
</div>
<div>
<img src="img/5b7b4f0a-01f3-43ce-99b3-670cdde9af2b_5t.jpg.webp" />
</div>
<div>
<img src="img/d3586e85-b189-4c08-a81a-8905bae871ae_5t.jpg.webp" />
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</body>
</html>
~~~
CSS
~~~
.item
{
width:370px;
height:230px;
display: inline-block;
position:relative;
}
.subdiv
{
width:350px;
height: 100px;
position:absolute;
bottom:10px;
left: 10px;
}
.subdiv>div
{
width:110px;
height: 100%;
display: inline-block;
background-color: white;
text-align: center;
border-radius: 2px;
position:relative;
}
.subdiv>div>img
{
width:60%;
height: 90%;
margin-top:5px;
}
/*
background-position:設置背景圖的偏移
* */
.bgicon
{
position:absolute;
left: -5px;
top:-10px;
width:21px;
height: 26px;
background-image: url(../img/tag_1x_1000_2.png);
}
#bg2
{
background-position: -22px 0px;
}
#bg3
{
background-position: -44px 0px;
}
~~~
綜合練習4：
