相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>相对定位</title>
<style>
.div1 {
/* 相对定位 */
position: relative;
top: 50px;
left: 50px;
/* 它是相对于自己原来的位置来移动的
(移动位置的时候参照点是自己原来的位置) */
/* 原来在标准流的位置继续占有,
后面的盒子仍然以标准流的方式对待它。
(不脱标,继续保留原来位置) */
/* 因此,相对定位并没有脱标。
它最典型的应用是给绝对定位当爹的。。 */
background-color: red;
width: 200px;
height: 200px;
}
.div2 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
position: relative;
/* “子绝父相” */
/*子级是绝对定位的话,父级要用相对定位。 */
/* 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,
不会影响其他的兄弟盒子。 */
/* 父盒子布局时,需要占有位置,因此父亲只能是相对定位 */
width: 400px;
height: 400px;
background-color: aqua;
}
.div2 {
width: 300px;
height: 300px;
background-color: blue;
}
.div3 {
/* 绝对定位 */
position: absolute;
bottom: 10px;
left: 10px;
/* 如果没有祖先元素或者祖先元素没有定位,
则以浏览器为准定位。 */
/* 如果祖先元素有定位(相对、绝对、固定定位),
则以最近一级的有定位祖先元素为参考点移动位置。 */
/* 绝对定位布展由原来的位置(脱标) */
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>固定定位</title>
<style>
.div1 {
margin: 0 auto;
width: 800px;
height: 1500px;
background-color: pink;
}
.a {
position: fixed;
/* top: 40px;
right: 20px; */
/* 以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。*/
/* 固定定位不在占有原先的位置。 */
/* 固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。 */
left: 50%;
margin-left: 410px;
/* 固定定位小技巧:固定在版心右侧位置。 */
top: 500px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="div1"></div>
</body>
</html>
上下滑动页面蓝框永远在页面的那个位置
粘性定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>粘性定位</title>
<style>
body {
height: 3000px;
}
.div1 {
position: sticky;
/* 以浏览器的可视窗口为参照点移动元素(固定定位特点) */
/* 粘性定位占有原先的位置(相对定位特点) */
/* 必须添加top. left、right、bottom其中一个才有效 */
top: 0px;
margin: 100px auto;
width: 500px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
绝对定位水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>绝对定位水平垂直居中</title>
<style>
/* 加了绝对定位的盒子不能通过margin:0auto 水平居中,
但是可以通过以下计算方法实现水平和垂直居中 */
.box {
position: absolute;
/* 水平居中 */
left: 50%;
margin-left: -100px;
/* 垂直居中 */
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: blue;
}
/* 绝对定位和固定定位也和浮动类似。 */
/* 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。 */
/* 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
/* 脱标的盒子不会触发外边距塌陷 */
/* 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。 */
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
定位层叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位层叠</title>
<style>
.w {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.div1 {
background-color: red;
z-index: 1;
/* 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上 */
/* 如果属性值相同,则按照书写顺序,后来居上 */
/* 数字后面不能加单位 */
/* 只有定位的盒子才有z-index属性 */
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
</style>
</head>
<body>
<div class="div1 w"></div>
<div class="div2 w"></div>
<div class="div3 w"></div>
</body>
</html>
div1加z-index: 1;
div1不加z-index: 1;
定位的扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位的扩展</title>
<style>
.div1 {
/* float: left; */
/* 浮动元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片) */
/* 浮动最初是用来做文字环绕效果的 */
position: absolute;
/* 绝对定位(固定定位)会压住下面标准流所有的内容。 */
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>111111112222222223333333334444444455555556666666</p>
</body>
</html>
绝对定位时
浮动时
好东西留在最后
ps:图片来自黑马程序员