为何设置CSS样式后ul元素无法移动到屏幕右上角？

你遇到的问题核心是绝对定位和float属性冲突：

• 当元素设置了position: absolute后，它会脱离正常文档流，此时float属性对它完全无效，你写的float: right根本不会起作用。
• 其实你已经写对了关键定位代码：top: 10px和right: 10px，这两个属性已经能把绝对定位的ul定位到容器的右上角。如果没生效，先检查ul的父元素有没有设置position: relative——如果父元素有这个属性，ul会相对于父元素定位，而不是整个屏幕。

直接删掉多余的float: right即可，修改后的CSS如下：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}

li { 
  display: inline-block;
  margin-right: 10px;
}

如果希望列表在页面滚动时也固定在右上角，可以把position: absolute改成position: fixed。

内容的提问来源于stack exchange，提问作者Daniël van Veelen