如何将红色div元素对齐到按钮顶部？已尝试position:absolute无效

嘿，我完全懂你遇到的困扰——给红色div加了position: absolute; top: 0;后，它没乖乖对齐按钮顶部，反而跑到页面最顶端去了对吧？这其实是绝对定位的规则在起作用：绝对定位的元素会找最近的、设置了非static定位的父元素当参照物，而按钮默认是position: static;（浏览器默认样式），所以div会一路往上找，直到碰到body/html，自然就对齐页面顶部了。

那修复起来超简单，只需要给按钮加一行position: relative;，把它变成div的定位参照物就行。下面是调整后的完整代码：

修改后的CSS代码 #

body { padding: 50px; }
button { 
  transition: transform 0.1s; 
  cursor: pointer; 
  height: 200px; 
  width: 320px; 
  border-style: none; 
  outline-style: none; 
  /* 新增相对定位，为子元素创建定位上下文 */
  position: relative;
  /* 原color: none无效，这里改成透明或者直接删掉都可以 */
  color: transparent;
}
button:hover { 
  transform:scale(1.03,1.03); 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  font-size: 30px; 
  color: #ffffff; 
  text-align: left; 
}
div { 
  width: 310px; 
  height: 170px; 
  background: red; 
  background-image: url(netflix\ black\ logo.png); 
  background-size: cover; 
  /* 绝对定位，现在会相对于按钮顶部对齐 */
  position: absolute;
  top: 0;
  /* 加上left:0确保左边也和按钮对齐 */
  left: 0;
}

调整后的HTML代码（结构无需改动） #

<html>
<head>
<title>shop.shop</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<form action="https://netflix.com/" target="_blank">
<button type="submit">
<div>
</div>
<!---p>visit netflix and stuff </p>-->
</button>
</form>
</body>
</html>

补充两个小细节：

1. 你之前写的color: none;是无效的，因为color属性没有none这个取值，我改成了color: transparent;来隐藏按钮默认文字，你也可以直接删掉这行。
2. 给div加left: 0;是为了确保它的左侧也和按钮完全对齐，避免出现不必要的偏移。

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