关于css定位

真萌新，请看下面两张图，我的设置的top和left怎么没用，还是顶在右上角。
还有关于.box .left设计成这样和直接.left有什么区别吗，求带佬教

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

只有设置position的值为 relative， absolute 或 fixed 时top和left才能有效
把你得top和left前面加上‘margin-’试一下 margin-left ; margin-right 当然后面要加单位
你要给他父div一个相对定位，你才能使用绝对定位
position：relative；用于绝对定位。position：absolute 用于相对定位（相对于父级dom，没有定义relative的话延伸相对于全局定位）。position：fixed用于固定定位。三者必须定义一个，你的left和top才能生效。
没有指定position属性时，浏览器默认是position:static，当position为static时，会忽略left,top,right,bottom,z-index这些设置。当设置position为relative、absolute、fixed会有效果。
直接使用top，left是没有效果的
你是不是打错了字box一直在左上角吧，要定位的话建议先清下浮动
*{ padding:0;margin:0;
}
然后在box里面设置float，margin，left等属性
你都没设置position
var btn1 =document.getElementById("start");btn1.onclick = function1();
function function1()

{
document.getElementById("cg1").style.visibility="hidden";
document.getElementById("cg2").style.visibility="visible";
document.getElementById("gal").style.visibility="visible";
}
上面是js部分；
下面是我设的body 部分
<body>
<div class="box">
<div class="cg1" id="cg1">
这里插入初始界面的图片
</div>
<div class="cg2" id="cg2">
这里载入第二张图片，狗哥的枪
<button class="btn233" id="start2">
</button>
</div>
<div class="cg3" id="cg3">
这里差第三张，pokemon fight
</div>
<div class="cg4" id="cg4">
第四张，世界名画
</div>
<div class="start">
<button class="btn" id="start"><font size="+4">
start</font></button>
<div class="above" id="zhandou">
<button class="btn"><font size="+3">
战斗</font></button>
</div>
<div class="buttom" id="taopao">
<button class="btn"><font size="+3">
逃跑</font></button>
</div>
<div class="progress" id="guocheng">
通过js写入战斗流程
</div>
<div class="gal" id="gal">
抄原文
</div>
<div class="emiyahp" id="ohp">
hp=100
</div>
<div class="lancerhp" id="hp">
hp=10000000000
</div>只是写了一部分，但是发现我点start没反应；
就是想用js控制div的显示与隐藏；
求带佬赐教
那个，如果我想让两个div重叠，比如我想让一个div被一个隐藏的button充满，我就算是用绝对定位也是自动要有一部分错位出去了，两个div也是一样，怎么让他完全重叠呢
在全局环境下的代码是在页面加载阶段从上到下一边加载一边执行的，这时处于代码下面的页面元素还没有加载完，访问不到。
要把script放在页面body下面，或者放到window.onload事件（页面加载完成后触发）中才可以