【CSS】Css设置position:absolute div标签不随页面滚动而滚动

问题原因

  最近实习在修bug的时候，遇到一个问题。简单来说html的结构就和下面差不多

	
 		

 			

 				当然这只是简单的结构
 			
 		

  因为在外部有标签是设置了overflow:auto，所以当内容超出了展示窗口的时候，是可以使用滚动条对内容进行滚动的。并且滚动的时候 div: id=“下拉框点击按钮” 是会随着页面进行滚动。这个时候就发现了主要的问题 div:id=“下拉框窗口” 就定在了页面中，不会随着滚动而滚动，而是在页面的绝对定位了。
  以下两张图片问题情况


  这就是问题的所在，设置了position:absolute的div标签，没有随着页面的滚动而滚动，也没有随着 div: id="下拉框点击按钮"标签一起滚动。

首先了解position

position语法：
  position : static absolute relative

position参数：
  static : 　无特殊定位，对象遵循HTML定位规则
  absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
  relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

position说明：
  设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

然后认识absolute

  absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素。记住一个“positioned”元素是指 position 值不是 static 的元素。
  其实可以发现主要就是设置了position:absolute的标签，父元素没有除了static的position属性，所以导致定位在了body标签里面中，所以就是直接以body计算定位，所以就算标签是内嵌页面，但是内嵌页面滚动当前也不滚动。

解决方案

  只要知道了原因，解决的方法就很简单了。

	
 		

 			

 				当然这只是简单的结构
 			
 		

  只要给父元素设置除了static的position值就可以了，这样设置absolute的标签就会以父元素的位置进行定位，内嵌页面进行滚动的时候，当前标签也会随着滚动。