【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)

06-CSS定位(position)

第1章 position属性

1-1 position-static

【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第1张图片

1-2 position-relative

【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第2张图片
【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第3张图片




	3
	
	


	

1-3 position-absolute(实际工作用的最多,同时也相对比较难)

【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第4张图片
【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第5张图片




	3
	
	


	

1-4 position-fixed

【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第6张图片
【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第7张图片




	3
	
	


	

1-5 position-sticky(了解即可)

【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第8张图片

第2章 实际应用

【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第9张图片
效果图:
【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第10张图片
【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position)_第11张图片




	3
	
	


	

你可能感兴趣的:(【慕课网】前端零基础入门---步骤二:页面化妆师CSS---06-CSS定位(position))