关于absolute的几点小结

关于absolute的几点小结

• float造成环绕效果，absolute保持跟随效果，absolute存在时float效果失效,absolute跟float一样具有包裹性，即由内容撑开宽高
• absolute具有跟随性，当没有设置top/left等偏移值时，这个元素只是脱离了文档流，会对后面的元素产生影响，但它自身原来在什么位置，现在还是在什么位置（即可以依据absolute的跟随性和margin来对元素进行定位），如下面这个例子：

使用独立的absolute实现定位 下拉框与绝对定位： 大众做法：
1.父容器relative；下拉框absolute；
2.无依赖的绝对定位：下拉ul在input前面（DOM结构），然后absolute，通过margin定位即可
优点：自适应强，应付各种变化环境

同时我们使用独立的absolute可以实现以下几个小例子：

• 图片居中，可以在绝对定位的图片的前面输入一个空格，然后父div设定text-align：center，这样就将空格移动居中的地方去了，而由于绝对定位的跟随性，他也跟随在空格后面一起居中，在加上maigin-left：负的自身宽度/2，就稳稳当当居中了，居左居右都是同样的道理
• 处理文字前的星号
  将星号绝对定位后其不占据任何空间，方便后面的文字左对齐，absolute不占据任何空间，可以超越外层限制不需要换行
• 位置居中：对于position为absolute和fixed的元素，同时设置left、right和width，即可由margin:auto水平居中；
  同理，top、bottom、height即可设置垂直居中

还有其他几点tips

1、动画尽量作用在绝对定位元素上
2、如果只有一个绝对定位元素，自然不需要z-index，它会自动覆盖普通元素
3、如果两个绝对定位，控制DOM流的先后顺序达到需要的覆盖效果，也不需要z-index