1、打开vscode，创建一个html页面。
2、在测试页面的同级目录，添加一张演示图片。
3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。
4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。
5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。
6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。
7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size: 100% 100%。
因为加了这个属性之后，元素li就变成了绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。因此，四个li都定位到了左上角，就产生了重叠的现象。
注意，定位会覆盖掉css代码中的：float:left让其失效。
【position：absolute 】用法：
将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框。
不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。
扩展资料：
【position:relative】和【position：absolute 】的差异。
1、对文档流的影响
relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。
absolute：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。
2、定位原理
absolute：在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）
参考资料来源：百度百科--position
