定位 介绍

• 定位 一个盒子漂浮再前面
• 固定定位 漂浮于网页的前面
• 绝对定位 一个盒子漂浮于另一个盒子的前面---参照物
• 辅助属性上下左右----z-index

 

 

参照物

• 固定定位的参照物----浏览器
• 绝对定位的参照物 ----具有定位的祖先文件

 

定位居中的实现

  

  左右居中    left0 right0 margin auto

////left50% margin-left 负宽度一半

 

上下居中

 

top0 bottom0 margin auto

top50% margin-top负高度的一半

 

定位的特点

完全脱离文档流

改变元素的特征

 

 

动画效果

普通的显隐效果

display none     display block

 

visibility hidden  visiblity visible

 

opacity 0    opacity 1

 

移动的动画效果

 

height 0  overflow hidden  transition 1s    height 300px

通过改变left/bottom/ right /top -----移动动画效果

 

 

 

总结 

定位之后宽度不继承 width 100px

定位之后不占位子 margin-top 挤下来

margin-top body 不能写overflow hidden 

因为body需要滚动