css相对定位和绝对定位及案例

css 相对定位和绝对定位及案例

定位对于页面布局起着很大的作用，网上关于定位概念的技术文章已经很多了，我就不多说什么了，就说一下具体应用吧

• 1.知识点: 
  三种常见定位比较： 
  不同点： 
  relative： 相对定位没有脱离文档流，原位置保留标准流位置，没有让出来，实体化显示位置通过设置偏移值发生偏移。 
  absolute：脱离文档流，以父级为基准来进行偏移，参考点为父级border以内的四个顶点。 
  fixed：脱离文档流，以屏幕为基准来进行偏移。 
  相同点： 
  偏移量都是用left,right,top,bottom来设置，可以设置为像素值，百分比（参考元素的border以内的宽度）负值，及特定值(center,top等)；还有都可以用z-index属性定义层叠关系。 
  
  
• 2.先关案例： 
  
  • 相对定位小案例： 
    使用相对定位制作微调效果。在不影响整个结构情况进行微调。

 

demo:https://cyanar.github.io/relative-absolute/relative.html

 实现方法：当鼠标滑过导航栏，在顶部会出现边框，这是因为在li标签hover状态下设置相对定位并设置top值为负值。

• 固定定位小案例： 
  固定定位也很常见，经常用于页面右下角固定位置用来返回到顶部等。

 

demo:https://cyanar.github.io/relative-absolute/fixed.html

• 绝对定位案例： 
  绝对定位用的就比较多了，在实际应用中，主要有三种方式：子绝父相，子绝父绝，子绝父固。如轮播图效果等

       

 

demo:https://cyanar.github.io/relative-absolute/absolute.html 
实现方法：父相对定位，子绝对定位