概述及相对定位
定位：
position:relative(相对)、absolute（绝对）、static（无定位）、fixed（固定）
相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。
编程练习1
补全下列代码，使得蓝色区块覆盖红色区块 并且蓝色区块分别距离顶部和左边50px。
效果图如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.blue{
width: 100px;
height: 100px;
background: blue;
position:relative;
top:50px;
left:50px;
}
.red{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
</body>
</html>
|
绝对定位
绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对与最初的包含块（如body）。
position:absolute;
相对定位relative的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据空间会被保留。绝对定位absolute会产生浮动效果，脱离文档流
设置了top和left属性之后必须设置position属性，不然不会生效
编程练习2
我们学习了position的绝对定位，那我们就运用绝对定位的知识来完成下列的要求，
要求：使div距离网页右边为200像素，距离底边为100像素 。
任务
1、我们要想给某个元素指定特定的位置，就需要用到绝对定位属性position：absolute；
2、给指定的元素设定完定位属性之后，我们先给指定属性设置距离右边200px；
3、给指定属性设置距离底部100px。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.test{
width: 100px;
height: 100px;
background: red;
position:absolute;
right:200px;
bottom:100px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
|
编程练习3
学习了定位属性，下面我们来用定位的知识完成下列代码，使得蓝色方块位于红色方块的正中心。
效果图如下：
任务
1、要给设置绝对定位元素的父元素进行相对定位的设置。
2、给设置绝对定位的元素进行顶部和左边位置的设置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
position:relative;
top:0px;
left:0px;
}
.son{
width: 100px;
height: 100px;
background: blue;
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
|
绝对定位和浮动
float和absolute的异同：float不会忽略文字，文字会绕过float浮动的图；
absolute则会忽略文字，文字不会绕过absolute定位的图文，会掩盖文字。
两者都会脱离文档流
相对定位和浮动
相对定位可以和float一起用，float主要是文字不会背图片遮挡，relative不会脱离文档流，可以用relative来调整位置。然后absolute和float都是脱离文档流，absolute会遮挡文字
z-index的使用
z-index: 属性决定谁在前谁在后，越大越靠上显示 用来改变层叠顺序
编程练习4
利用课程讲解z-index的知识，设置两个div元素的叠加
任务
任务提示
1、分别定义两个div的高度和宽度相同
2、对两个div设定偏移
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <html>
<head>
<style type="text/css">
#one{
width: 100px;
height: 100px;
background: red;
position:relative;
top:70px;
z-index:20;
}
#two{
width: 100px;
height: 100px;
background: green;
position:relative;
left:20px;
z-index:10;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
</body>
</html>
|
固定定位
固定定位，相对与浏览器窗口进行定位
position：fixed；
编程练习5
我们学习了CSS中的定位，那么现在我们来运用定位的知识来实现网页中常见的对联广告吧。
要求：无论页面怎么移动，页面左右的的广告栏不会发生位置的变化。
效果如下图所示：
任务
1、首先我们需要添加一个块元素，并且以慕课网为背景，模拟整个网页，并给块元素设置足够的宽高。
2、在网页中添加两个块元素，分别为对联广告中的左侧广告块和对联广告的右侧广告块
并且给对联块设置宽高
3、我们需要给对联左右块元素添加固定定位属性
4、使得对联左右块元素相对于窗口垂直居中
任务提示
背景图片：
http://climg.mukewang.com/59c9f7ce0001839219034033.png
http://climg.mukewang.com/5a3383c70001f1b702240364.png
http://climg.mukewang.com/5a3383d00001a3dd02240364.png
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{
background-image: url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");
width:1500px;
height:4033px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
background-repeat:no-repeat;
background-position:top;
}
.div1{
position: fixed;
right: 0px;
top: 20%;
}
.div2{
position: fixed;
left: 0px;
top: 20%;
}
</style>
</head>
<body>
<div class="main">
<div class="div1">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
</div>
<div class="div2">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</div>
</body>
</html>
|