abstract：<!-- 1.详解css中的定位(fixed/relative/absolute) 2.伪选择器:hover 3.案例:优酷顶部导航 --><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Pos
<!--
1.详解css中的定位(fixed/relative/absolute)
2.伪选择器:hover
3.案例:优酷顶部导航
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position(定位)</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
/*CSS中的定位(Position)属性允许你对元素进行定位;(fixed/relative/absolute)*/
/* fixed:元素的位置相对于浏览器窗口是固定位置;*/
.fix{
width: 35px;
height: 500px;
background: red;
/*position: fixed;top:20px ;left:40px;*/
position: fixed;right: 0;bottom: 20px;
}
/*relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块;*/
.rel{
width: 200px;
height: 200px;
background: pink;
position: relative;/*top: 20px;left: 20px;*/
}
/* absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块*/
/* 特点：绝对定位使元素的位置与文档流无关，因此不占据空间*/
.a{width: 1500px;
height: 50px;
background: blue;
position: absolute;left:30px;
z-index:-1;
}
/* z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效*/
/*子绝父相*/
/* 2.伪选择器:hover*/
a{
color: #000;
text-decoration: none;
}
a:hover{
font-weight: bold;/*字体加粗*/
color: red;
text-decoration: underline; /*给元素加上下划线*/
}
ul{margin-left: 30px;}
ul li{
position: relative;
list-style: none;/*清除列表项前面的点*/
float: left; /*左浮动*/
width: 100px;
border: 1px solid #ccc;
line-height: 40px; /*行高*/
text-align: center; /*文本居中*/
}
ul li:hover{background: pink;color: blue;}
ul li ul{
width: 100px;
height: 100px;
position: absolute;left:-30px;
display: none; /*使当前元素不显示*/
}
ul li:hover .menu{
display: block;
}
</style>
</head>
<body>
<div class="fix">
</div>
<div style="height: 1200px;">
<div class="rel">
<div class="a"></div>
</div>
<a href="">php中文网!</a>
<ul>
<li>web
<ul class="menu">
<li>html</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>sql</li>
<li>java</li>
</ul>
</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-03-29 14:15:03
Teacher's summary：定位有四种,除了默认的, 最常用的其实就是绝对定位的, 多看看