收藏
批改状态：合格
老师批语：
定位分为三种：固定定位fixed; 相对定位relative;绝对定位absolute;
伪选择器:hover用于制作下拉框
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="images/x-icon" href="">
<title>css中的定位</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.fix{
width: 40px;
height: 500px;
background: red;
/*固定定位：可以上下左右移动*/
position: fixed;top: ;left: ;right: 0;bottom: ;
}
.box{
height: 2000px;
}
/*relative:相对定位元素的定位是相对其正常的位置，相对定位元素通常是用来作为绝对定位元素的容器块*/
.rel{
width: 200px;
height: 200px;
background: green;
position: relative;/*top: 20px;left: 20px;*/
}
/*absolute:绝对定位的元素位置相对于最近的已定位父元素，如果没有父元素，那么他的位置相对于初始包含块*/
.a{
width: 50px;
height: 50px;
background: red;
position: absolute;left: 300px;
}
/*z-index 属性设置元素的堆叠顺序，页面默认是1，结合定位才有作用，相对定位设置不管用*/
/*子绝父相*/
/*伪选择器:hover;*/
a{
color: #000;
text-decoration: none;
}
a:hover{
color: green;
font-weight: bold; /*字体加粗*/
font-size: 20px;
text-decoration: underline; /*给元素加上下划线*/
}
ul li{
list-style: none;
float: left;
width: 100px;
/*border: 1px solid #000;*/
line-height: 30px;
text-align: center;
position: relative;;
}
ul li:hover{
background: blue;
color: red;
}
ul li ul{
width: 100px;
height: 100px;
position: absolute;left: 0;
display: none; /*使元素不显示*/
}
ul li:hover .b{
display: block;
}
</style>
</head>
<body>
<div class="fix">
</div>
<div class="box"">
<div class="rel">
<div class="a"></div>
</div>
<a href="">php中文网</a>
<ul>
<li>web
<ul class="b">
<li>html</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>sql</li>
<li>java</li>
</ul>
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1.fixed固定定位是固定在页面某个位置，可以上下左右移动；
relative相对定位元素的定位是相对其正常的位置，相对定位元素通常是用来作为绝对定位元素的容器块；
absolute绝对定位的元素位置相对于最近的已定位父元素，如果没有父元素，那么他的位置相对于初始包含块;
子绝父相.
2.z-index 属性设置元素的堆叠顺序，页面默认是1，结合定位才有作用
3.伪选择器:hover主要用于超链接鼠标点上去的效果和制作下拉框。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
