CSS中Position属性的功能

这篇文章主要讲解了“CSS中Position属性的功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS中Position属性的功能”吧！

　　position定位类型

　　定位元素（positionedelement）是其计算后位置属性为relative,absolute,fixed或sticky的一个元素。

　　相对定位元素（relativelypositionedelement）是计算后位置属性为relative的元素。

　　绝对定位元素（absolutelypositionedelement）是计算后位置属性为absolute或fixed的元素。

　　粘性定位元素（stickilypositionedelement）是计算后位置属性为sticky的元素。

　　大多数情况下，height和width被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定top和bottom，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间。

　　除了刚刚描述的情况（绝对定位元素填充可用空间）：

　　如果top和bottom都被指定（严格来说，这里指定的值不能为auto），top优先。

　　如果指定了left和right，当direction设置为ltr（水平书写的中文、英语）时left优先，当direction设置为rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时right优先。

　　position语法

　　position属性被指定为从下面的值列表中选择的单个关键字。

　　取值

　　static

　　该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时top,right,bottom,left和z-index属性无效。

　　relative

　　该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative对table-*-group,table-row,table-column,table-cell,table-caption元素无效。

　　absolute

　　不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

感谢各位的阅读，以上就是“CSS中Position属性的功能”的内容了，经过本文的学习后，相信大家对CSS中Position属性的功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！