CSS边框元素定位故障求助：margin属性无法移动元素

我最近在做一个Minecraft账号售卖的页面，遇到了CSS定位的麻烦——给带边框的元素设置margin-top、margin-left这些属性后，元素根本没法上下移动，完全搞不懂哪里出问题了。我对HTML和CSS不太熟，代码格式可能有点乱，麻烦大家帮忙看看，也希望能得到这类定位问题的排查思路，谢谢啦！

我的CSS代码 #

body { 
  background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg"); 
} 

.title { 
  font-size:50px; 
  font-family: 'Raleway', sans-serif; 
  position: absolute; 
  color: white; 
  left: 790px; 
} 

.title { 
  position: relative; 
} 

.text { 
  color: white; 
  font-family: 'Work Sans', sans-serif; 
  font-size: 30px; 
  line-height: 10px; 
} 

.nfa { 
  width: 250px; 
  border: 1px solid white; 
  padding: 75px; 
  margin: 10px; 
  margin-left:100px; 
  margin-top: 65px; 
  background-color:black|50%; 
} 

.sfa { 
  width: 250px; 
  border: 1px solid white; 
  padding: 75px; 
  margin: 10px; 
  margin-left:100px; 
  margin-top: 65px; 
  background-color:black; 
} 

.of { 
  width: 250px; 
  border: 1px solid white; 
  padding: 75px; 
  margin: 10px; 
  margin-left:750px; 
  margin-bottom: 500px; 
  background-color:black; 
  position: absolute; 
} 

.text-desc { 
  color:white; 
  font-family: 'Work Sans', sans-serif; 
  font-size: 15px; 
} 

.buttonnfa { 
  background-color: #09ebf7; 
  border: none; 
  color: white; 
  padding: 10px 100px; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  font-size: 16px; 
  margin-top:15px; 
  font-family: 'Work Sans', sans-serif; 
} 

.buttonsfa { 
  background-color: #09ebf7; 
  border: none; 
  color: white; 
  padding: 10px 100px; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  font-size: 16px; 
  margin-top:15px; 
  font-family: 'Work Sans', sans-serif; 
} 

.buttonof { 
  background-color: #09ebf7; 
  border: none; 
  color: white; 
  padding: 10px 100px; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  font-size: 16px; 
  margin-top:15px; 
  font-family: 'Work Sans', sans-serif; 
} 

.buttonnfa:hover{ background-color:#05a2aa; } 
.buttonsfa:hover{ background-color:#05a2aa; } 
.buttonof:hover{ background-color:#05a2aa; }

我的HTML代码 #

<!doctype html> 
<html> 
<head> 
<title> SpeedyAlts </title> 
<link rel="stylesheet" href="css/style.css"> 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"> 
</head> 
<body> 
<div class='bg'> 
<a class="title"> SpeedyAlts </a> 
<div class="nfa"> 
<center> 
<a class="text"> NFA Account </a> 
<br> 
<br> 
<a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a> 
</center> 
<a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a> 
</div> 
<div class="sfa"> 
<center> 
<a class="text"> SFA Account </a> 
<br> 
<br> 
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a> 
</center> 
<a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a> 
</div> 
<div class="of"> 
<center> 
<a class="text"> Optifine Cape </a> 
<br> 
<br> 
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a> 
</center> 
<a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a> 
</div> 
</div> 
<script src="https://embed.selly.gg"></script> 
</body> 
</html>

问题排查思路与修复建议 #

1. 修复CSS语法错误
   你的.nfa类里background-color:black|50%是无效写法，浏览器会忽略这个属性，可能导致整个样式块解析异常。应该改成半透明的正确写法：background-color: rgba(0, 0, 0, 0.5);

2. 解决定位属性冲突
   .title类被重复设置了position: absolute和position: relative，浏览器只会生效最后一个（relative），导致之前的left:790px失效。如果需要绝对定位，保留第一个position: absolute即可，或者统一使用relative并调整位置。

3. 理解定位对Margin的影响

   • .of类使用了position: absolute，这类元素会脱离正常文档流，margin的计算不再受父元素或相邻元素影响，需要配合top/left属性来定位，或者给父元素.bg添加position: relative作为绝对定位的参考容器。
   • 正常文档流的元素（如.nfa、.sfa）如果margin不生效，检查是否有父元素的overflow、padding或者其他元素的float属性干扰。

4. 利用浏览器开发者工具排查
   按F12打开开发者工具，选中目标元素：

   • 查看样式面板，确认margin属性是否被划掉（被其他样式覆盖）
   • 查看盒模型面板，直观看到元素的margin、padding、border实际占用空间
   • 临时禁用其他样式，逐步排查哪个属性导致定位异常

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