【聊代码】第十二集：图片标签（之四）|老小孩博文

       我们上传图片，如果图片的宽值较小，图片可能会横向排列几张，如果是大图片，就只能竖向排列了。但无论如何，图片不会重叠，也就是说，一张图片不会落在另一张图片上。要把一张图片放在另一张图片上，并且要放在认为理想的位置，就必须在图片标签中添加“css定位样式”。定位样式有两种，一种为“相对定位样式”，一种为“绝对定位样式”。前者属性代码是reiative，后者属性代码是absolute。下面先看一张图片，花的图片是普通图片，并非背景图，在花图片上放了三个同样的人物抠图。

 

 

       上图代码：

 

     ＜p＞＜img src="https://www.oldkids.cn/upload/2018/05/25/blog_20180525220054642.jpg" /＞＜/p＞
＜p＞＜img src="https://www.oldkids.cn/upload/2018/05/24/blog_20180524164846305.png" style="POSITION: absolute; WIDTH: 350px; TOP: 580px; LEFT: 230px" /＞＜/p＞
＜p＞＜img src="https://www.oldkids.cn/upload/2018/05/24/blog_20180524164846305.png" style="POSITION: relative; WIDTH: 400px; TOP: -480px; LEFT: 70px" /＞＜/p＞
＜p＞＜img src="https://www.oldkids.cn/upload/2018/05/24/blog_20180524164846305.png" style="POSITION: absolute; WIDTH: 450px; TOP: 520px; LEFT: 480px" /＞＜/p＞

 

       解析上面的代码：

       可以明显看出，代码有四个段落组成，第一个段落是花卉图的图片标签。第二、三、四个段落是同一幅图片（人物抠图）含有“定位样式”的图片标签。其中，第二、四段代码里有absolute这说明采用的是“绝对定位样式”，第三段代码里有relative，这说明采用是“相对定位样式”（因为在这里“相对”与“绝对”无大差异，我们无须讨论它，知道有两个样式就够了）。
    我们选择一个“绝对定位样式”＜img src="https://www.oldkids.cn/upload/2018/05/24/blog_20180524164846305.png" style="POSITION: absolute; WIDTH: 350px; TOP: 580px; LEFT: 230px" /＞为例，对其中属性、属值作个说明：
     我们在这里再一次认识“css样式”，它的明显特征就是把所有属性、属值都汇集在“style”等号后面的引号内。这样说就便于认识它了吧，一看就知道是“css样式”。具体到“定位样式”，包含内容如下：

     POSITION: absolute 定位样式属性，“absolute”表示绝对定位样式；“relative”表示相对定位样式。

     WIDTH: 350px 图片规格（大小），改变这个值，可以调整图片大小，即：值越大图片越大。

     TOP: 580p 图片上下定位属值，增大或减小这个值，图片下移或上移，即：值越大图片越靠下。

     LEFT: 230px 图片左右定位属值，增大或减小这个值，图片右移或左移：即：值越大图片越靠右。

 

       最后要提醒两个问题：
     （一）当我们完成了图片定位之后，如果你又对图片大小作了调整，那必须重新定位图片。因为图片的大小会影响它的位置，它的变化符合画面“上远下近”，“上小下大”的原则。
     （二）图片的规格大小必须用宽“WIDTH”来表示，要调整图片大小，就改动“WIDTH”的值（改动“HEIGHT”的值是没有意义的，故这里没有它）。