css定位的概念
属性：position
作用：检索或者设置元素的定位方式（改变元素位置的属性）
定位分为静态定位，绝对定位，相对定位，固定定位，粘性定位
（1）static 静态定位：
position的默认值，默认文本流的状态。
不会识别left right top bottom指定的坐标
（2）absolute 绝对定位:
a : 参照物：按照已经有定位的父元素进行位置的变化。
b : 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。
c : 绝对定位，脱离文档流、不占据空间
（3）relative 相对定位：
a : 参照物：自身默认的位置！
b : 始终占据空间，不会破坏文档流
（4）固定定位： position :fixed;
a : 参照物：浏览器窗口
b : 脱离整个文本流,不占据空间
（5）黏性定位：position:sticky;
a: position:relative 和 position:fixed的结合。
b:如果页面没超出窗口范围，按照relative 执行
如果内容超出窗口位置，按照fixed执行。
我们如何实现定位，就类似于将草莓放进冰箱里，首先我们先拿起草莓，找到冰箱（此时的冰箱位参考物），再思考把草莓放在冰箱的什么位置（上,下,左,右）。
定位的步骤：
1：给元素添加position属性，证明该元素要做位置的变化。
2：确定参照物！（通过position的属性值来确定：static\absolute\relative\fixed\sticky）
3: 确定坐标 left right top bottom
要实现子元素在父元素的位置操作，除了padding之外，我们还可以采用定位的方式来实现。
代码如下：
<!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>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:300px;
background:orange;
margin:50px auto;
/* 形成参照物 */
position:relative;
}
p{
width:100px;
height:100px;
background:red;
position:absolute;
left:40px;
top:50px;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
```css
效果如下：
如何让内容在浏览器窗口左右居中，有两种方法可以实现：
第一种：
position:fixed;
left:50%;
top:50%;
margin:-高度的一半 0 0 -宽度的一半。
第二种：
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
除此之外，我们还可以使用定位实现子元素在父元素中左右上下居中。
方法如下： position:absolute;
left:0;right:0;
top:0;bottom:0;
margin:auto;
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
