CSS中的left属性是一个非常重要的属性，它可以用来定义HTML元素在水平方向上相对于其父元素的左侧边缘的位置，这有助于我们实现很多有趣的效果，比如悬浮菜单、滚动导航等。

对于left属性的值，我们可以使用具体的长度单位（如px、em等），也可以使用百分比值。需要注意的是，如果给元素同时设置了left和right属性，会导致元素的宽度无法自适应，因此在使用left属性时需要谨慎。

. menu{position: absolute;left: 0;top: 0;width: 100px;background-color: #FFF;}

上面的代码演示了一个典型的悬浮菜单的实现，通过将菜单的定位方式设置为absolute，然后将left属性设置为0，即可让菜单固定在父元素的左侧边缘。

需要提醒的是，left属性只对被设置为“定位元素”的元素有效果，因此在设置left属性之前，需要将元素的position属性设置为relative、absolute或fixed等值，否则left属性将会失效。

. box{position: relative;width: 200px;height: 200px;background-color: #FA6;}. icon{position: absolute;left: 20%;top: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;background-image: url("icon.png");background-size: cover;}

这里的代码演示了如何通过设置left属性，使得图标元素位于父元素的中心偏左。需要注意的是，这里我们还使用了transform属性，将图标元素的中心点位于其自身的50%、50%处，从而使其完美居中。

综上所述，left属性是CSS中非常实用的一个属性，掌握好它的使用方法，将能让你的网页效果更加出彩。