position:relative top:10%不起作用

如果 `position: relative; top: 10%;` 不起作用，可能有以下几个原因：

1. 父元素没有设置高度或者是 `position` 属性，这会导致子元素的 `top` 值无法生效。
2. 其他 CSS 规则可能会影响到该元素的布局，例如 `float` 或 `clear` 属性。
3. 元素本身的高度可能太小，使得 `top` 值太小而无法被注意到。

你可以使用浏览器的开发者工具检查元素的 CSS 样式，并逐步排除以上原因。如果还是无法解决问题，可以提供更多的代码和上下文信息，让我更好地理解问题并给出解决方案。

相关问题

position:static 和 position:relative

`position:static` 和 `position:relative` 是 CSS 中的定位属性，它们可以用来控制元素在页面中的位置。

`position:static` 是默认的属性值，它表示元素在文档流中的位置，并且不会被其他元素覆盖。如果给一个元素设置了 `position:static`，那么 `top`、`right`、`bottom`、`left` 和 `z-index` 属性将不起作用。

`position:relative` 表示元素相对于其正常位置进行定位。也就是说，如果给一个元素设置了 `position:relative`，然后设置了 `top`、`right`、`bottom`、`left` 属性，那么元素会相对于其正常位置进行移动，而不会影响其他元素的位置。如果不设置 `top`、`right`、`bottom`、`left` 属性，那么元素的位置不会发生改变。

总之，`position:relative` 可以用来微调元素的位置，而 `position:static` 表示元素的默认位置，不需要进行调整。

position: relative;的作用

position: relative;是CSS中的一个定位属性，它的作用是相对于元素本身原来的位置进行定位。具体的作用包括：

1. 块级元素设置position: relative;后，可以通过top、right、bottom、left等属性进行相对于原本位置的微调；

2. 在使用z-index属性时，只有position属性值为relative、absolute、fixed的元素才能设置z-index属性值，因此使用position: relative;可以使元素具有z-index属性；

3. 在设置伪元素（::before和::after）样式时，如果需要将伪元素相对于元素自身进行定位，需要给元素设置position: relative;

总的来说，position: relative;可以使元素相对于原始位置进行微调，并且在一些特殊情况下也很有用。