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：
