[分享]css中定位属性的用法

CSS（Cascading Style Sheets）是一种用于描述网页外观和样式的语言，其中定位属性是一种重要的属性之一，可以实现元素在页面中按照指定位置呈现的效果。下文介绍css中定位属性的用法。...

CSS（Cascading Style Sheets）是一种用于描述网页外观和样式的语言，其中定位属性是一种重要的属性之一，可以实现元素在页面中按照指定位置呈现的效果。下文介绍css中定位属性的用法。

position: static | relative | absolute | fixed | sticky; 

static定位是默认的定位方式，元素按照HTML文档的元素流呈现，不会受到top、left、bottom、right属性的影响。

relative定位是相对于元素自身的位置定位。通过设置top、left、bottom、right属性值来让元素产生位移，但不影响其他元素的位置。

position: relative;
top: 20px;
left：50px; 

absolute定位是相对于最近的已定位的祖先元素（包括相对定位、绝对定位、固定定位）来确定元素位置，如果没有已定位的祖先元素，则参考body元素。和relative定位一样，通过设置top、left、bottom、right属性值来让元素产生位移，且可以脱离文档流。

position: absolute;
top: 20px;
left: 50px; 

fixed定位是相对于浏览器窗口的位置进行定位，通过设置top、left、bottom、right属性值来让元素产生位移。滚动页面时该元素不会发生位置变化。

position: fixed;
top: 20px;
left: 50px; 

sticky定位是相对于元素在文档流中的位置进行定位。在元素到达指定的滚动位置之前，它会表现为relative定位；之后，它会固定在指定位置。

position: sticky;
top: 20px; 

总的来说，定位属性是CSS中非常有用和重要，可以实现元素在页面中的绝对和相对位置，帮助我们设计出更加具有个性和美观的页面布局。