css中定位后位置不动 |css clippath

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

上面这段CSS代码是将一个元素使用绝对定位，横向定位在距离浏览器窗口左边界50px的位置，纵向定位在距离浏览器窗口顶部50px的位置。但是，在一些特殊场景下，大家会发现该元素的位置没有按照大家的预期位置变动，这是为什么呢？

这个问题的解决办法非常简单。大家需要确认该元素的父元素是否有定位方式。比如该元素的直接父元素如果没有设置定位方式的话，绝对定位会直接参照html（即body）的边界进行定位，而不是采用距离浏览器窗口的定位方式，这样就导致了元素位置不动的问题。

position: relative;

那么，如何解决这个问题呢？大家只需要在父元素中设置相对定位即可：

position: relative;

这样，该元素就会以父元素为基准进行定位，位置也会随着父元素的变更而变化。同样的，如果该元素的父元素有定位方式，但并不是相对定位，大家依然可以通过设置相对定位使其正常变动。

绝对定位与相对定位是网页设计中非常常用的两种布局方式，通过熟练掌握定位的用法，大家可以很容易地完成复杂的网页布局，并实现大家的设计需求。