网页的定位主要有四种：静态定位、相对定位、绝对定位和固定定位。本作业主要通过绝对定位实现窗口遮罩功能、固定定位制作广告位。
以下是一些示例代码：
1、绝对定位实现窗口遮罩功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="static/css/style08.css"> -->
<style>
body {
margin: 0;
background-image: url(static/images/php.jpg);
background-size: cover;
background-repeat: no-repeat;
}
/* 设置遮罩 */
.shade {
/* 遮罩绝对定位,并自动伸展到整个窗口 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 将背景设置为纯黑,并设置透明度为0.7 */
background-color: black;
opacity: 0.7;
}
/* 设置登录窗口.背景色为白色，定位方式为绝对定位，相对当前页面右移50%、下移50%。
内边距左移190px、上移230px。 */
.login {
background-color: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -230px;
}
/* 设置登录框大小 */
.login img {
width: 380px;
height: 460px;
}
</style>
<title>绝对定位之遮罩</title>
</head>
<body>
<div class="shade">
</div>
<div class="login">
<img src="static/images/login.jpg" alt="">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、固定定位制作广告位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="static/css/style09.css"> -->
<style>
/* 设置网页背景为浅灰色，高度为2000px; */
body {
background-color: lightgray;
height: 2000px;
}
/* 设置广告区域宽度为350px,高度为250px,背景色为浅蓝色，定位方式为固定定位，
距离右边为0px，距离底部为0px。 */
.ads {
width: 350px;
height: 250px;
background-color: lightblue;
position: fixed;
right: 0;
bottom: 0;
}
/* 广告按钮向右浮动 */
.ads button {
float: right;
}
</style>
<title>固定定位</title>
</head>
<body>
<h1>实现广告位</h1>
<div class="ads">
<button onclick="this.parentNode.style.display='none'">关闭</button>
<h2>php中文网第四期上线</h2>
<h1>招生进行中</h1>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果
1、绝对定位实现窗口遮罩功能
2、固定定位制作广告位
手写代码
总结
1.静态定位：浏览器默认方式。
2.相对定位：元素并未脱离文档流，只是相对于它原来的位置，做相对移动。
3.绝对定位：元素脱离文档流，不论元素之前是什么类型，全部转为块元素，支持宽高。
4.固定定位：始终相对于浏览器的窗口做为定位父级，进行定位。
