2020-11-05 css实例：粘性定位及样式解释

最新推荐文章于 2023-02-13 17:00:34 发布

Amanda&Rachel

最新推荐文章于 2023-02-13 17:00:34 发布

阅读量350

点赞数 1

分类专栏： css学习总结文章标签：定位 css css3

本文链接：https://blog.csdn.net/m0_51907938/article/details/109511537

版权

本文介绍了CSS粘性定位的概念，它是相对定位和固定定位的结合，通过设置偏移量实现特定位置的固定效果。内容包括css实例展示粘性定位的使用，以及在使用中需要注意的四个关键点，如父元素不能有overflow:hidden等属性限制，必须指定定位方向，父元素高度要求等。

摘要由CSDN通过智能技术生成

粘性定位

粘性定位是相对定位和固定定位的混合，给盒子设置一个偏移量，未到达该偏移量时是相对定位，到达偏移量时是固定定位。

css实例粘性定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
    			/*重置样式*/
				margin: 0;
				padding: 0;
			}
			dl{
    			/*dl是父元素*/
				padding-top: 24px;/*设置字距离盒子距离*/
			}
			dt{
    			/*设置粘性定位元素*/
				background: orange;/*背景颜色*/
				color:#fff;/*字体颜色*/
				position: sticky;/*设置粘性定位*/
				top:10px;/*设置粘性定位达到偏移量固定位置*/
			}
		</style>