Mark 11, 2020 1 min to read

关于html中的position属性

复习一下position的relative和absolute属性

　　　　今天按demo写例子，发现relative和absolute可以配合使用，所以又来复习一下position的常用属性:

sticky：基于用户的滚动位置来定位。也就是以sticky标签定义的标签会随着页面上下移动，但是其内容却不会超过屏幕比如在网站侧边那些移动导航栏
static：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。也就是和没写position一样的效果
fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，相当一个壁纸标签一样一动不动像镶嵌在屏幕里一样，在很多网站尤其是购物网站里面经常能看到，你看到页面侧边那静静躺在那的导航栏就是用fixed实现的
relative：生成相对定位的元素，相对于其正常位置进行定位；因此，”left:20” 会向元素的 LEFT 位置添加 20 像素
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

看完各个属性，上代码

<div class="box">
	<div class="back"></div>
	<div class="modal">
		<span class="desc">
			描述文字
		</span>
	</div>
</div>
<style type="text/css">
.box{
	position: relative;
	height: 200px; width: 300px
}
.back{
	background-image: url(http://www.imaoda.com/s/img/github/21.jpg);
	height: 100%; width: 100%;
}

.modal{
	position:absolute;
	bottom: 0;
	height: 20%; width: 100%;
	background: rgba(0,0,0,.5)
}
.desc{
	 color: white
}
</style>

　　position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定