css中position有哪些不同的值

今天就跟大家聊聊有关css中position有哪些不同的值，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联自2013年创立以来，先为咸丰等服务建站，咸丰等地企业，进行企业商务咨询服务。为咸丰企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

position属性

position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。有五种不同的值：

•static
•relative
•fixed
•absolute
•sticky

然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。

position:static;

默认情况下，HTML元素定位为静态。静态定位元素不受top，bottom，left和right属性的影响。元素position:static;没有以任何特殊方式定位; 它总是根据页面的正常流程定位：

这个

元素的position:static;




    
    css
    


position: static;
一个位置为position:static; 没有任何特殊的定位; 它是始终根据页面的正常流程定位：

    这个div元素的位置为：static;

position:relative;

具有position:relative;相对于其正常位置定位的元素。设置相对定位元素的top，bottom，left和right属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。

这个

元素的position:relative;




    
    css
    


position: relative;
position:relative的元素; 相对于其正常位置定位：

    这个div元素有position: relative;

position:fixed;

元素position:fixed;相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top，bottom，left和right属性用于定位元素。固定元素不会在页面中留下通常位于其中的间隙。注意页面右下角的固定元素。




    
    css教程（jc2182.com）
    


position:fixed;
position:fixed; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置：

    这个div元素有position: fixed;

position:absolute;

具有position:absolute;相对于最近定位的祖先定位的元素（而不是相对于视口定位，如fixed）。然而; 如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。注意： “定位”元素的位置是除了static之外的任何元素。




    
    css教程（jc2182.com）
    


position: absolute;
position:absolute;的元素; 相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）：
这个div元素有 position: relative;
    这个div元素有 position: absolute;

position:sticky;根据用户的滚动位置定位元素。粘性元素在relative和之间切换fixed，具体取决于滚动位置。它被相对定位，直到在视口中满足给定的偏移位置 - 然后它“粘住”到位（如位置：fixed）。

注意： Internet Explorer，Edge 15及更早版本不支持粘性定位。Safari需要-webkit-前缀（参见下面的示例）。您还必须指定的至少一个top，right，bottom或left为粘稠的定位工作。

在此示例中，top: 0当您到达其滚动位置时，粘性元素会粘到页面顶部。

css的基本语法是什么

css的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。

看完上述内容，你们对css中position有哪些不同的值有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

属性	描述
bottom	设置定位框的底部边缘
clip	剪辑一个绝对定位的元素
left	设置定位框的左边缘
position	指定元素的定位类型
right	设置定位框的右边缘
top	设置定位框的上边缘
z-index	设置元素的堆栈顺序

关于创新互联

css中position有哪些不同的值

position: static;

position: relative;

position:fixed;

position: absolute;

css的基本语法是什么

其他资讯