关于前端的碎碎念2-CSS装修之元素定位有哪些
【摘要】 学习前端，前端就好比如盖房子~ html就充当了房子结构这部分，也是房子的基础。 css呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板...这些给房子改变风格，样式的就是css javascript呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是javascript 好了，大概这样子开始了~follow me~
在web前端中，元素定位是必须掌握的，是网页制作的必备技能，也是衡量是否为一个合格的web前端开发的标准之一，在网页设计中，很多地方都需要使用定位，例如菜单弹出，提示信息层等都需要定位。所以css定位知识点的难易程度为简单。
position为元素定位属性，包含以下属性值
1. absolute绝对定位
相对位置为父元素为非static的第一个父元素进行定位。
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
.box_absolute {
position: absolute;
left: 30px;
top: 20px;
}
2. fixed 固定定位（老IE6不支持）
相对于浏览器窗口进行定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fixed固定定位</title>
<style type="text/css">
body {
height: 2000px;
}
p.one {
position: fixed;
left: 5px;
top: 5px;
}
p.two {
position: fixed;
bottom: 50px;
right: 5px;
}
</style>
</head>
<body>
<p>我是固定定位1 我一直在固定在浏览器顶部这里一些文本。</p>
<p>我是固定定位2 我一直在固定在浏览器底部这里 更多的文本。</p>
</body>
</html>
3. relative相对定位
相对于其正常（默认布局）位置进行定位。
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
.box_relative {
position: relative;
left: 30px;
top: 20px;
}
4. static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
注意：
所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
absolute定位忽略padding，相对位置为相对定位容器的左上角内边框，
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）