CSS top属性不生效问题咨询（附HTML代码示例）

嘿，这个问题挺常见的！你的内部<div>设置的top: 25%没生效，核心原因是：top这类偏移属性，只对设置了非默认定位规则的元素起作用。

默认情况下，HTML元素的定位模式是position: static——这是浏览器的默认设置，在这种模式下，top、left、right、bottom这些偏移属性会被浏览器直接忽略，完全不会产生效果。

咱们看你写的代码：

<!DOCTYPE html> 
<html> 
<head> 
<title>e-Rario</title> 
</head> 
<body> 
<div style="height: 60px; background: blue;"> 
  <div style="top: 25%; background: green;">e-Rario</div> 
</div> 
</body> 
</html>

内部的绿色<div>只加了top:25%，但没指定position属性，浏览器自动给它套用了position: static，所以这个top规则等于白写啦。

怎么修复？ #

你只需要给内部的绿色<div>设置一个非static的定位值就行，常见的两种方案：

1. 用position: relative：元素会相对于它原本的位置偏移，不会脱离正常文档流

<div style="height: 60px; background: blue;"> 
  <div style="position: relative; top: 25%; background: green;">e-Rario</div> 
</div>

2. 用position: absolute：元素会相对于最近的、设置了非static定位的父元素偏移（注意要给蓝色父<div>也加position: relative，不然它会相对于整个页面偏移）

<div style="height: 60px; background: blue; position: relative;"> 
  <div style="position: absolute; top: 25%; background: green;">e-Rario</div> 
</div>

这两种方式都能让top属性生效，具体选哪种，就看你想要的布局效果啦~

内容的提问来源于stack exchange，提问作者Cristian