文章目录
第19课-相对定位的使用及练习
第一点：定位的例子
第二点：定位的分类
相对定位、绝对定位、z-index。
第三点：案例-默认情况
第四点：相对定位
上下左右的意思是：距离上，下，左，右的距离。
第五点：相对定位练习
第20课-方块定位练习讲解
前端的东西，真的不难，你必须不停地去访别人的东西。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 300px;
padding: 0px;
border: 1px solid #0d6199;
margin: 0 auto;
}
a {
height: 100px;
width: 100px;
text-decoration: none;
background-color: #d09393;
line-height: 100px;
color: white;
text-align: center;
display: block;
}
a:hover{
background-color: #7a7afb;
}
.a2,.a4 {
position: relative;
left:200px;
top:-100px;
}
.a5 {
position: relative;
left:100px;
top:-300px;
}
</style>
</head>
<body>
<div>
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
第21课-绝对定位和固定定位
第一点：绝对定位
定位也是基于xxx定位，定位也是有上下左右的。
我们通过例子，来演示一下：
上面的这张图，就是一个默认的效果。
就增加了一个position:absolute之后， 就变成了上面的鬼样子。
1、没有父级元素定位的前提下，相对于浏览器定位。父级元素没有设置定位的时候，就是相对于浏览器定位。
设置了absolute之后，就飘起来了。
2、如果我们给父级元素设置一个position:relative，绝对定位就会参照父级元素进行定位。实际开发中，也是这样做的。假设父级元素存在定位，我们通常会相对于父级元素进行偏移。
3、在父级元素范围内移动。
相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流当中，原来的位置不会保留。
第二点：固定定位
很多导航栏就是使用固定定位的。
大家看，div1是绝对定位的，div2是固定定位的。
滚动了浏览器条之后，出现下面的情况：
div1会随着浏览器条的移动，上下移动的，这是绝对定位的。
div2是固定定位的，永远都不动的。
div1，绝对定位是相对于元素初始位置的，是不变的。这个意思，叫做绝对定位。
div2是固定定位，意思就是咋样都不会变的。
返回顶部这些东西，都是通过fixed固定定位实现的。
第22课 - z-index及透明度
在PS当中，有个东西，叫做图层。理解z-index，就按照上面的图理解。
z-index就是为了设置图层的级别，默认为0的，设置为999，就是最上级的。
设置透明度的时候，如果是高级浏览器的时候，直接用opacity属性，如果是ie8或者是较低的版本，可以使用filter:Alpha(opacity=50)就可以了
效果是下面的：
第一点 小总结
浮动和定位，在网页当中，是大量使用的。
本篇守护女神-陈法蓉、洪欣、朱茵、蔡少芬
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
