css中定位属性视频讲解

今天我们来学习一下CSS中的定位属性。定位属性可以让我们自由地控制HTML里的元素在页面上的位置。下面我们来看一下三种常用的定位属性。
1. position: static
这是元素默认的定位方式，也就是没有做任何定位。在这种情况下，top、right、bottom、left和z-index这些属性都是没有控制作用的。
2. position: relative
这种定位方式是相对于元素的正常位置进行定位。例如，如果你希望元素向右移动20像素，就可以通过设置left:20px来实现。同样的，如果你希望元素向下移动10像素，可以通过设置top:10px来实现。
3. position: absolute
这种定位方式是相对于元素的父级元素进行定位。如果元素没有父级元素，那么就是相对于body元素进行定位。因此，如果你希望元素在页面上的固定位置，可以通过设置position:absolute，再设置top、right、bottom和left这些属性来实现。
需要注意的是，定位方式为absolute的元素将不再占据原来在文档流中的位置，因此其他元素会把它们的原来位置重新占据。
最后，我们还有一种比较特殊的定位方式，即position: fixed。这种方式是相对于浏览器窗口进行定位，也就是说元素不会随页面滚动而移动。通常用于制作菜单栏、浮动广告等。
总结一下，CSS中的定位属性提供了很多可以自由控制元素位置的方法，可以帮助我们实现丰富多样的页面效果。需要注意不同方式的定位属性的特点和注意事项，才能掌握使用技巧。