<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative样式</title><style type="text/css">#div1{ width:200px; height:200px;border:2px red solid; position:relative; //position:absolute;left:100px; top:50px; }</style></head><body>
5 回答
已采纳
ahao430
TA贡献35条经验 获得超41个赞
对比一下不设置position，和relative，absolute的图。
可以看出不设置和设置relative两张图文字位置没有任何变化。因为position：relative不会脱离文档流。虽然通过设置left和top移动了div，但是文档流中依然占据最开始的位置，不会影响其他元素。假设你不设置left和top值，那么两张图是完全一样的。
而第三张图中，可以看出文字跑到最上面了。因为position：absolute会脱离文档流。只是你移动了div，看起来不在一起。如果不设置top和left的话，就会发现div没动，但是文字跑上来重叠在一起了。
你把top和left都去掉，再在浏览器中查看就会明白了。
顺便说一下，css里的注释不能用//，你看你图片里的注释都没有变灰。只是刚好因为加了//浏览器不认识所以没有执行。
blovetu
TA贡献319条经验 获得超234个赞
设置position，盒子脱离了文本流，另外设置float也会脱离文本流，你可以单独把这些试一下，下次遇到这种问题就明白了;
你的position:absolute,没有注释成功，css的注释是/*注释内容*/, html的注释是<!--注释内容--> , js的注释是//注释内容 ，sumblime注释的快捷键是,选中要注释的文本按ctrl+/
nickylau82
TA贡献128条经验 获得超67个赞
设置relative你可以想象一下，这个div是个飞机，从停机坪飞起来，飞到别的地方去了。但是。。这个停机坪还是要给他留着的，否则飞不回来了。。。
- 5 回答
- 0 关注
- 2674 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消