我们说float是半脱离文档流(块状元素重叠,行内元素不重叠)。
定位是指元素移动到哪里,允许元素相对于某个基准进行移动。
普通文档流、浮动(半脱离文档流)、定位(脱离文档流)
格式:position: value
-
relative
,相对定位。相对于元素自身的本来的位置进行定位。可以使用top、bottom、left、right来移动元素。
值如果是正数那么向它所在的反方向在走,负数是向它自己的方向在走。
- top,指定了定位元素上边界相对于正常位置的上边界的偏移量。(正数向下、负数向上)
- bottom,指定了定位元素下边界相对于正常位置的下边界的偏移量。(正数向上、负数向下)
- left,指定了定位元素左边界相对于正常位置的左边界的偏移量。(正数向右、负数向左)
- right,指定了定位元素右边界相对于正常位置的右边界的偏移量。(正数向左、负数向右)
注意:
- 同时使用left、right,则left生效。
- 同时使用top、bottom,则top生效。
- 相对定位之后,该元素即使移动走,其本来的位置也不会被其他元素所占据。
- relative的值如果是百分比那么是相对于包含的父元素进行计算的,而不是自身。
-
absolute
,绝对定位,绝对定位的元素从文档流中删除,其位置相对于容纳块来确定。
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8" />
<style>
#f1{
position:absolute;
border:10px solid green;
}
#f2{
float:left;
width:100px;
height:100px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div id="f1">
<div id="f2"></div>
</div>
</body>
</html>
显示:
-
同时使用四个方向的偏移属性来定位元素,但是width和height为auto时,将会自动计算宽度和高度。也就是会被拉开(
top:0;bottom:0;left:0;right:0
) -
垂直、水平居中(absolute可以用来垂直居中)
- 父元素设置
position: relative;
- 子元素设置
position: absolute;
- 子元素设置
top: 50%、left: 50%
(这个时候的50%相对于父元素的宽度和高度) - 子元素设置自身的
margin-top
和margin-left
的值(这些值是自身的宽度和高度的一半)
- 父元素设置
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8" />
<style>
#z {
width:500px;
height:500px;
border:1px solid pink;
position:relative;
}
#z1{
width:100px;
height:100px;
border:1px solid red;
position: absolute;
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
}
</style>
</head>
<body>
<div id="z">
<div id="z1"></div>
</div>
</body>
</html>
显示:
二级菜单的制作:
display: none; 给子元素。
display: block; 给父元素。
遮罩层
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
显示:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .3);
}
.nav .content {
width: 400px;
height: 400px;
line-height: 400px;
/* border: 1px solid red; */
background-color: #fff;
margin: 200px auto;
text-align: center;
font-size: 0;
}
.nav .content img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="nav">
<div class="content">
<img src="./img/qr-code.png" alt="">
</div>
</div>
</body>
</html>
显示:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。