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

问题原因

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

<body>
	<!-- 省略多个外部结构  有overflow:auto-->
 		<div id="下拉框点击按钮">
 			<div id="下拉框窗口"  style="position:absolute; left=xxx; top=xxx">
 				当然这只是简单的结构
 			</div>
 		</div>
</body>

  因为在外部有标签是设置了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计算定位,所以就算标签是内嵌页面,但是内嵌页面滚动当前也不滚动。

解决方案

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

<body>
	<!-- 省略多个外部结构  有overflow:auto-->
 		<div id="下拉框点击按钮" style="position:relatevie">
 			<div id="下拉框窗口"  style="position:absolute; left=xxx; top=xxx">
 				当然这只是简单的结构
 			</div>
 		</div>
</body>

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

展开阅读全文

Python数据分析与挖掘

01-08
92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元   为什么学习数据分析?       人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。       从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。    本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。   二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。   三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。   四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。   五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值