大兔子 - 7月5日作业
相对定位、绝对定位、固定定位的区别
1、定位方式
相对定位：
position: relative;
绝对定位：
position: absolute;
固定定位：
position: fixed;
控制定位偏移距离：
top: 10px; 上 left: 10px; 左 right: 10px; 右 bottom: 10px; 下
控制定位层级
z-index: 1; 数字越大，层级越高
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>7月5日作业</title>
<style>
/* 简易样式重置 */
* {
margin: 0;
padding: 0;
}
body {
background: url("https://blog.datuzi.top/template/datuzi/img/bg.jpg") no-repeat;
background-size: cover;
}
h1 {
font-size: 24px;
text-align: center;
line-height: 2;
color: #fff;
margin: 50px 0;
}
/* 给父元素设置相对定位 */
.top {
width: 100%;
max-width: 500px;
height: 400px;
margin: 0 auto;
background-color: antiquewhite;
position: relative;
}
/* 子元素设置绝对定位 */
.top div {
width: 20%;
height: 100px;
border: 1px solid #000;
position: absolute;
font-size: 48px;
text-align: center;
line-height: 100px;
color: #fff;
}
/* 第一个div位置定位 */
.top div:first-child {
top: 0;
left: 50%;
margin-left: -10%;
background-color: blue;
}
/* 第二个div位置定位 */
.top div:nth-child(2) {
bottom: 0;
left: 50%;
margin-left: -10%;
background-color: #ff006e;
}
/* 第三个div位置定位 */
.top div:nth-child(3) {
top: 50%;
left: 0;
margin-top: -51px;
background-color: #b200ff;
}
/* 第四个div位置定位 */
.top div:nth-child(4) {
bottom: 50%;
right: 0;
margin-bottom: -51px;
background-color: #808080;
}
/* 最后一个DIV位置定位 */
.top div:last-of-type {
top: 50%;
left: 50%;
margin-left: -10%;
margin-top: -51px;
background-color: #4cff00;
}
/* 登录框 */
.denglu .bg {
position: absolute;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
}
.denglu .denglu-con {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 6;
margin: auto;
width: 300px;
height: 300px;
background-color: #fff;
}
.denglu .denglu-con form {
padding: 60px 0;
}
.denglu .denglu-con p {
margin: 30px 0;
}
.denglu .denglu-con p label {
width: 80px;
display: inline-block;
text-align: right;
}
.denglu .denglu-con p input {
width: 180px;
height: 25px;
display: inline-block;
}
/* 固定定位 */
.ad {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1;
width: 200px;
height: 100px;
text-align: center;
border: 1px solid #ccc;
border-radius: 6px;
}
.ad button {
background-color: #0094ff;
color: #fff;
padding: 0 26px;
height: 25px;
line-height: 25px;
border: none;
display: block;
margin-left: auto;
border-radius: 0 6px 0 6px;
}
.ad p {
font-size: 16px;
height: 40px;
line-height: 40px;
color: #fff;
}
.ad h1 {
font-size: 22px;
height: 35px;
line-height: 30px;
color: #ff006e;
margin: 0;
}
</style>
</head>
<body>
<h1>大兔子 - 7月5日作业</h1>
<!-- 了解定位 -->
<section class="top">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<!-- 模仿php中文网登陆 -->
<section class="denglu">
<div class="bg"></div>
<div class="denglu-con">
<button onclick="this.parentNode.style.display='none'">关闭</button>
<form action="" method="post">
<!-- 用户名 -->
<p>
<label for="ursename">用户名：</label>
<input type="text" name="ursename" id="ursename" placeholder="由2-8个英文或数字组成" autofocus="autofocus" />
</p>
<!-- 密码 -->
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="由8-16个英文或数字组成" required="required" />
</p>
</form>
</div>
</section>
<!-- 固定定位小广告 -->
<section class="ad">
<button onclick="this.parentNode.style.display='none'">关闭</button>
<p>php中文网第7期***</p>
<h1>招生进行中</h1>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
