div块移动之后，为什么span块没有移动到现在边框的下边位置，div块不应该占据整个边框么
<!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>
慕田峪0816849浏览 2694回答 5
5回答
-
ahao430
对比一下不设置position，和relative，absolute的图。可以看出不设置和设置relative两张图文字位置没有任何变化。因为position：relative不会脱离文档流。虽然通过设置left和top移动了div，但是文档流中依然占据最开始的位置，不会影响其他元素。假设你不设置left和top值，那么两张图是完全一样的。而第三张图中，可以看出文字跑到最上面了。因为position：absolute会脱离文档流。只是你移动了div，看起来不在一起。如果不设置top和left的话，就会发现div没动，但是文字跑上来重叠在一起了。你把top和left都去掉，再在浏览器中查看就会明白了。顺便说一下，css里的注释不能用//，你看你图片里的注释都没有变灰。只是刚好因为加了//浏览器不认识所以没有执行。 -
blovetu
设置position，盒子脱离了文本流，另外设置float也会脱离文本流，你可以单独把这些试一下，下次遇到这种问题就明白了;你的position:absolute,没有注释成功，css的注释是/*注释内容*/, html的注释是<!--注释内容--> , js的注释是//注释内容 ，sumblime注释的快捷键是,选中要注释的文本按ctrl+/ -
qyy2499760117_叶子
这节课讲的是 position:relative;的作用，偏移位置保留不懂。 -
nickylau82
设置relative你可以想象一下，这个div是个飞机，从停机坪飞起来，飞到别的地方去了。但是。。这个停机坪还是要给他留着的，否则飞不回来了。。。
随时随地看视频慕课网APP
Html/CSS