四种定位方法

75 阅读 0 评论 50 点赞

我是靠谱客的博主聪慧茉莉，最近开发中收集的这篇文章主要介绍四种定位方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

定义：给定元素一定的位置

作用：实现侧边导航栏，网页中的广告

1.固定定位

语法：position：fixed+片偏移量【left/top/right/bottom】才能让元素达到自己想要的位置

实现效果：div或者某些元素固定在页面的某个位置。

2.粘性定位

语法：position:sticky;

实现效果：如果前面有元素，并且元素有高度，那么它会滑过元素高度之后再执行固定定位；如果前面元素没有或者元素的高度之和小于top后面的属性值，它直接开始固定定位。

3.绝对定位

语法：position:absolute;

应用：参考侧边导航栏

实现效果：如果父级元素有定位，则根据父级元素进行移动，如果父级元素没有定位，则逐级往上找有定位的元素，找到之后按照这个元素的位置开始定位，如果找不到，则根据浏览器窗口进行定位。

4.相对定位

语法：position:relative;

应用：参考侧边导航栏

实现效果：根据自身的位置进行移动。

以上就是聪慧茉莉为你收集整理的四种定位方法的全部内容，希望文章能够帮你解决四种定位方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。