静态定位
<style>
.parent{
width: 300px;
height: 300px;
background-color: aqua;
}
.child{
width: 100px;
height: 100px;
background-color: pink;
/*
静态定位
position: static;
元素默认情况下就是静态定位，静态定位设置元素的偏移量(top,bottom,right,left)无效
position属性用来设置元素的定位
left,top,right,bottom 用来设置元素的偏移量
*/
position: static;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
相对定位
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 300px;
height: 300px;
background-color: pink;
}
.child1{
width: 100px;
height: 100px;
background-color: powderblue;
/*
相对定位的使用场景：
1. 微调元素位置
2. 子绝父相 ，做为绝对定位元素的参照物
相对定位元素的参照物：元素本身原来的位置
相对定位的特性：
1.相对定位的元素不会脱离标准文档流，依然会占据原来的空间。
*/
position: relative;
left: 10px;
top: -50px;
}
.child2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
绝对定位
<style>
*{
margin: 0;
padding: 0;
}
body{
padding-top: 100px;
background-color: red;
}
.parent{
width: 300px;
height: 300px;
background-color: blue;
margin-top: 100px;
/* position: relative; */
}
.child1{
width: 100px;
height: 100px;
background-color: pink;
/*
绝对定位：
参照物： 一般指定它的父元素作为参照物（即：父元素相对定位）
如果父元素没有定位，那么会向上一层一层的查找是否有定位的父级元素，
直至找到 html根标签为止。
绝对定位的特性：
绝对定位的元素会脱离标准文档流，不在占据原来的位置。
*/
position: absolute;
top: 100px;
}
.child2{
width: 100px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">绝对定位的元素</div>
<div class="child2"></div>
</div>
固定定位
<style>
body{
height: 3000px;
}
.box{
width: 100px;
height: 300px;
background-color: skyblue;
position: fixed;
right: 100px;
bottom: 100px;
}
span{
position: fixed;
top: 100px;
left: 100px;
background-color: skyblue;
width: 300px;
height: 100px;
}
/*
固定定位：
以浏览可视窗口为参照， 与父元素有无定位无关
特征：
固定定位的元素会脱离标准文档流，不占据原来的空间。
*/
</style>
</head>
<body>
<div class="box"></div>
<span>固定定位</span>
</body>
粘性定位
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.wrapper{
height: 1000px;
}
.top{
height: 60px;
background-color: skyblue;
}
.header{
height: 100px;
background-color: slateblue;
}
.nav{
height: 60px;
background-color: pink;
position: sticky;
top: 0px;
}
.content{
height: 600px;
background-color: red;
}
/*
粘性定位： 被认为是相对定位和固定定位的结合体，元素在没有到达指定偏移量时属于相对定位；
元素到达指定偏移量时属于固定定位。
注意： 粘性定位必须指定偏移量才能生效
*/
</style>
</head>
<body>
<!-- <div class="wrapper"> -->
<div class="top"></div>
<div class="header"></div>
<div class="nav"></div>
<!-- </div> -->
<div class="content"></div>
</body>