[分享]css中定位几种类型分别是

CSS中的定位可以使页面元素相对于浏览器窗口或其他元素进行定位。在CSS中，有几种不同的定位类型，分别是： : static; : absolute; : relative; : fixed; 这些不...

CSS中的定位可以使页面元素相对于浏览器窗口或其他元素进行定位。在CSS中，有几种不同的定位类型，分别是：

 position: static;
    position: absolute;
    position: relative;
    position: fixed; 

这些不同的定位类型可以在不同的场景下使用，以满足页面布局和需求。

1. static

static是CSS中的默认定位类型。元素在文档流中根据其在HTML中的位置进行布局。这意味着元素不会受到其他元素的影响，并且无法通过top、right、bottom或left属性进行调整。

 div {
        position: static;
    } 

2. absolute

absolute之间的元素相对于其最近的非static父元素进行定位。如果没有非static元素，则相对于浏览器窗口进行定位。该元素从文档流中脱离，因此不会影响其他元素的位置。可以使用top、right、bottom和left属性来调整元素的位置。

 div {
        position: absolute;
        top: 50px;
        left: 50px;
    } 

3. relative

相对定位的元素相对于其在文档流中的原始位置进行定位。元素仍然占据其原始空间，因此对其他元素的布局没有影响。可以使用top、right、bottom和left属性来调整元素的位置。

 div {
        position: relative;
        top: 50px;
        left: 50px;
    } 

4. fixed

固定定位的元素相对于浏览器窗口进行定位。元素从文档流中脱离，并且在页面滚动时保持不变。可以使用top、right、bottom和left属性来调整元素的位置。

 div {
        position: fixed;
        top: 50px;
        left: 50px;
    } 

CSS中的四种定位类型各有不同的优缺点，根据布局和需求选择正确的定位类型可以大大改善页面布局和用户体验。