1、指定position属性(static/fixed/relative/absolute/sticky)
2、指定top,button,left,right属性
3、指定overflow属性
4、指定堆叠顺序z-index
<html>
<head>
<style>
p.pos_fix {
position: fixed;
top: 30px;
right: 5px;
}
p.pos_rel {
position: relative;
left: 20px;
top: -40px;
color: red;
}
p.pos_abs {
position: absolute;
left: 100px;
top: 150px;
}
div.pos_sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: lightgrey;
border: 2px solid red;
}
img{
position:absolute;
left:0px;
right:0px;
z-index: -1;
}
</style>
</head>
<body>
<p class="pos_fix">
this is position fixed
</p>
<p>
this is position relative
</p>
<p class="pos_rel">
this is position relative
</p>
<p class="pos_abs">
this is position absolute
</p>
<div class="pos_sticky">
this is position stick
</div>
<img src="my_logo.png"/>
<div style="height:2000px;background-color:grey;">
需要滚动才能体现出效果。
</div>
</body>
</html>