[华为云在线课程][大话CSS][学习笔记][第6章][CSS定位]
【摘要】 6.1，定位属性 定位属性定位属性用于设置元素在页面中的位置使用position属性来表示定位它的值可以设置为：static、relative、absolute、fixed默认值为static，表示标准流布局 定位位置在使用定位属性定位元素位置的时候，可以指定上下左右四个属性来控制元素的位置top用于设置元素定位时距离上部的偏移距离bottom用于设置元素定位时距离下部的偏移距离left用...
6.1，定位属性
定位属性
- 定位属性用于设置元素在页面中的位置
- 使用position属性来表示定位
- 它的值可以设置为：static、relative、absolute、fixed
- 默认值为static，表示标准流布局
定位位置
- 在使用定位属性定位元素位置的时候，可以指定上下左右四个属性来控制元素的位置
- top用于设置元素定位时距离上部的偏移距离
- bottom用于设置元素定位时距离下部的偏移距离
- left用于设置元素定位时距离左侧的偏移距离
- right用于设置元素定位时距离右侧的偏移距离
- 需要注意的是，偏移量可以为负值
层次
- 可以使用属性z-index设置定位元素的层级，值越大，显示时越是覆盖在其他元素的上边
- z-index属性默认值为auto，代表层级与父元素相同
- 该属性只在position值为absolute时有效
- 例如：
<style>
.pos1
{
position: fixed;
}
.pos2
{
position: relative;
}
.pos3
{
position: absolute;
top: 50px;
}
</style>
<div class="pos1">我是一个固定定位的元素</div>
<div class="pos2">我是一个相对定位的元素</div>
<div class="pos3">我是一个绝对定位的元素</div>
6.2，相对定位
什么是相对定位
- 相对定位是指元素相对于标准文档流中的默认位置来进行定位的
- 当position属性值设置为relative时，开启相对定位模式
- 相对定位并不会让元素脱离标准流
- 相对定位不会影响到周围其他元素的排布
- 实际使用时相对定位一般都是和位置属性一起使用
例如
<!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>Document</title>
<style>
.box
{
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box">我是一个相对定位元素</div>
</body>
</html>
6.3，绝对定位
什么是绝对定位
- 相对于除static定位之外的第一个父元素进行定位，如果没有就相对于页面定位
- 把position属性的值设置为absolute时，代表开启绝对定位模式
- 被设置为绝对定位的元素会脱离标准流
- 当多个绝对定位元素出现相互覆盖的情况时，可以使用z-index属性设置层级
绝对定位和相对定位搭配使用
- 情景：当我们想要让子元素相对于父元素进行绝对定位时，可以在父元素上使用相对定位
<!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>Document</title>
<style>
.parent
{
height: 300px;
background-color: yellow;
position: relative;
}
.child
{
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="parent">我是父元素，我使用相对定位
<div class="child">我是子元素，我使用绝对定位</div>
</div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）