自定义盒子位置失效：设置left:20px无效果，CSS问题排查求助

嘿，这个问题我太熟了！你遇到的情况本质上是CSS定位的基础规则问题——left/top这类偏移属性只对非静态定位（non-static）的元素生效，而W3Schools那个todo示例里的盒子默认是position: static（浏览器默认值），所以你设置left:20px完全不会有反应~

问题根源 #

默认情况下，所有HTML元素的position属性值是static，这种定位模式下，元素遵循正常的文档流排列，left/right/top/bottom这些偏移属性会被浏览器直接忽略，你只能通过margin、padding或者调整文档结构来改变位置，没法实现“自由拖拽”式的定位效果。

解决方案：给盒子设置非静态定位 #

你只需要给想要自由定位的盒子添加position属性，再配合left/top就能生效了，常用的选项有三种，根据你的需求选择：

• position: relative：元素相对于它原本在文档流里的位置偏移，不会脱离文档流，其他元素的布局不受影响
• position: absolute：元素脱离文档流，相对于最近的一个设置了非static定位的父元素来定位；如果没有这样的父元素，就相对于整个页面视口
• position: fixed：元素脱离文档流，固定在视口的某个位置，页面滚动时它不会跟着移动

举个具体的例子，假设你要调整的盒子类是.todo-box，修改CSS代码如下：

.todo-box {
  position: relative; /* 先设置定位模式，这里以relative为例 */
  left: 20px; /* 现在这个属性就能生效，向左偏移20px */
  top: 30px; /* 同理，向下偏移30px */
  /* 保留你原来设置的宽高、背景、边框等样式 */
}

额外提示 #

如果是表格元素（比如<table>），默认的display属性是table，虽然设置position也能生效，但如果遇到奇怪的布局问题，可以先添加display: block;把它转换成块级元素，再设置定位会更稳妥。

这样调整后，你就能按需自由定位盒子啦！

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