CSS新手必看！position属性大揭秘，让你的页面任意摆弄

要说网页设计，就得说起CSS了，那玩意儿管着咱们页面的样子和架构。特别是那个叫position的属性，简直就是调位置的神器！接下来我要教你们怎么用它，不管你懂不懂，我保证给你慢慢讲明白。

1. static定位

在CSS学习中，你可能常听到position属性的默认值是static（静态）模式。这意味着页面中的元素都稳如泰山，无论你怎么调整它的方位，比如设定top、right、bottom、left等，都无法改变他们原先的排版位置。换句话说，这些元素就像是随遇而安般的躺在哪里，无需任何特别的操作就能随心所欲地呆着！

所谓静态定位，就是那些文字、图片之类的东东，如果没特别设置 position 属性的话，那么就会保持呆在原地一动也不动！

2. relative定位

“相对定位”其实就是CSS里的基础定位方法。用上它，你可以随心所欲地改变元素原有的位置，又不用担心会破坏别的元素的排列顺序。简单来说，就是通过top、right、bottom、left这四个属性，想往哪儿挪就往哪儿挪！

下面是一个使用relative定位的示例：

css
.box {
    position: relative;
    top: 20px;
    left: 30px;
}
    .box {
        position: relative;
        top: 50px;
        left: 100px;
    }


    我是一个相对定位的元素


你看这儿，我们就是用代码来控制那叫box的家伙的位置。然后，轻轻地往左边和右边偏离了20px和30px！
3. absolute定位
啥叫“绝对定位”？就是我们平常常用的那个调整网页元素位置的小技巧你们可能也遇见过，有时候元素跑来跑去，对？那是因为它们乱跑出了原来的文档流，不受控制。但是使用绝对定位这个招数，元素就可以乖乖待在自己的父级容器周围，不会再捣乱喔。还有另外一种情况，如果父级容器找不到已定位好了的祖先元素怎么办？别怕，这种情况下，它会以整个页面的根元素为基准进行定位，理解起来超级简单哈～
下面是一个使用absolute定位的示例：
.container {
    position: absolute;
    top: 50px;
    left: 100px;
    .parent {
        position: relative;
    }
    
    .box {
        position: absolute;
        top: 50px;
        left: 100px;
    }


    

        我是一个绝对定位的元素
    


就地说了比如我们把.box元素设为绝对定位，那它就得挑最近设定过相对定位的大佬爸爸（也就是}.container元素咯），才能知道该往哪儿动！
4. fixed定位
固定定位可不能小看，比常规的相对定位牛掰多了！它不会受到父级容器影响，直接根据浏览器窗口进行定位。不论你怎样捣鼓页面，固定在那里的元素都稳当得很！
下面是一个使用fixed定位的示例：
.fixed-element {
    position: fixed;
    top:0;
    right:0;
把这个代码输进去呗。那个叫’.fixed-element’的东西就会乖乖呆在网页右上角，稳得很！
5. sticky 定义
    .box {
        position: fixed;
        top: 50px;
        left: 100px;
    }


    我是一个固定定位的元素


听我说，CSS3居然有个神奇的粘性属性！当你翻页时，它会自动帮你把某个元素安放进刚才刷过的那块区域。方便？
下面是一个使用sticky 定义示例：
.sticky-element {
Safari浏览器上就能用这个-webkit-sticky属性，简单得很！
    position: sticky;
这段奇妙的代码能让你看网页的时候，有个叫.sticky-element的家伙就只会呆在它老爸容器顶上，稳如泰山！
6.不同position属性间关系
咱就说，用б landlords的position属性时，这几个属性可不是独立存在的。比如，把一个绝对定位的放到相对定位里面去，后面那个自然也就随着前面那个跑了。
这其实挺简单哒，主要就是把每一个子元素的position属性调整下就行。
    .box {
        position: sticky;
        top: 50px;
    }


    我是一个粘性定位的元素


7.实际应用场景
做网页，肯定要用到那个叫position的东西。比如说建个导航栏，把它设定为”固定”就能始终在上面，稳如泰山！如果你还想让照片飘呀飘的效果？那咱们就试试绝对或者相对定位！
做响应式设计的时候，得常用定位属性来调位置。
8.总结与展望
看完这篇文章，您就会知道 CSS 里的 Position 属性是干嘛用滴。每个值都能帮我们用上各种布局小窍门，让复杂布局不再难搞！
你知道吗？web技术每天都在升级，CSS功力也越来越牛，让我们做网页的人有更多新玩法咯。这不，可得天天保持学习热情，学学如何将这些新知识运用到工作里去！
我们来说说 CSS 里的 position 属性。我来给你们仔细说说，还有例子辅助你们理解。希望看完这篇文章后，你们能更灵活地用好这个重要功能，设计出属于自己的独特界面！
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/2024/04/14189.html，转载请注明出处~~~