一、定位
定位:将元素在页面中重新排列,分为四类
Ⅰ 静态定位: 浏览器默认方式, 即文档流中的位置
Ⅱ 相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style4.css"> <title>定位与相对定位(position:relative)</title> </head> <body> <!-- 相对定位小案例: 在页面中创建一个彩色十字架--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
实例
.box1 {
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgray;
}
.box3 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box5 {
width: 150px;
height: 150px;
background-color: lightseagreen;
}
/*下面对每个区块进行相对定位完成目标*/
/* 相对定位 */
.box1 {
position: relative;
/* 第一个区块,向右移动150px即可 */
left: 150px;
}
.box2 {
/* 第二个区块不需要移动 */
}
.box3 {
position: relative;
/* 第三个区块: 先右移动300px, 再向上移动150px */
left: 300px;
top: -150px; /* 注: 这里必须使用负数才可以向反方向移动 */
}
.box4 {
position: relative;
/* 第四个区块: 先右移动150px, 再向上移动300px */
left: 150px;
top: -300px; /* 注: 这里必须使用负数才可以向反方向移动 */
}
.box5 {
position: relative;
/* 第五个区块与第三个区块操作完全相同: 先右移动150px, 再向上移动300px */
left: 150px;
top: -300px; /* 注: 这里必须使用负数才可以向反方向移动 */
}Ⅲ 绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style5.css"> <title>绝对定位小案例(position:absolute)</title> </head> <body> <!-- 定位参照物: 1. 相对定位, 是以元素在文档流中的原始位置为参照物进行定位的 2. 绝对定位, 它是脱离了文档流的, 所有必须要有一个定位父级做为参照物 position: absolute; 默认以整个窗口进行绝对定位, 定位父级是<body> --> <!-- <div style="width: 100px;height:100px;background: black;position: absolute; left:0;top:0;"></div>--> <!-- 黄色色块是红色色块的定位父级元素, 红色色块相对于父级进行定位的--> <!-- <div style="width: 300px; height: 200px;background: yellow; position: relative;">--> <!-- 绝对定位元素, 总是相对于离它最近的定位元素进行定位--> <!-- <div style="width: 100px;height:100px;background: red;position: absolute; left:20px;top:20px;"></div>--> <!-- </div>--> <!-- 绝对定位小案例: 在页面中创建一个彩色十字架--> <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div> </body> </html>
实例
.parent {
position: relative;
/* 也可以使用绝对定位,但推荐使用相对定位,以防止一些兼容性问题 */
/*position: absolute;*/
border: 1px dashed gray;
width: 450px;
height: 450px;
}
.box1 {
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgray;
}
.box3 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box5 {
width: 150px;
height: 150px;
background-color: lightseagreen;
}
/*下面进行绝对定位*/
.box1 {
position: absolute;
/* 第一个区块只需要右移150px,即可 */
left: 150px;
}
.box2 {
position: absolute;
/* 第二个区块, left不用设置,只需要top=150px,将它从左上角顶下来即可 */
top: 150px;
}
.box3 {
position: absolute;
/* 第三个区块向右跨二个区块位置,并向下移一个区块位置 */
left: 300px;
top: 150px;
}
.box4 {
position: absolute;
/* 第四个区块,向右向下各移动一个区块位置 */
left: 150px;
top: 150px;
}
.box5 {
position: absolute;
/* 第五个区块,向右移动一个区块位置,向下移动二个区块位置 */
left: 150px;
top: 300px;
} Ⅳ 固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位小案例(position:fixed)</title> <link rel="stylesheet" href="static/css/style7.css"> </head> <body> <h1>固定定位小案例:实现广告位</h1> <div class="ads"> <button onclick="this.parentNode.style.display = 'none'">X</button> <h2>php中文网第六期线上班</h2> <h1>招生进行中...</h1> </div> </body> </html>
实例
body {
height: 2000px;
}
.ads {
width: 350px;
height: 250px;
background-color: lightblue;
position: fixed;
right: 0;
bottom: 0;
}
button {
float: right;
margin-top: 10px;
margin-right: 20px;
border: none;
background: none;
color: red;
font-size: 2em;
}