前面我们已经学会了设置帖子父元素尺寸、给帖子添加背景图片以及定位帖子等内容，现在，我们来看看如何给帖子添加必要的元素，例如一幅小图片。下面，帖子容器我们继续使用上一节的，但为了便于现场展示，我们可能会修改包括选择器名称在内的相应数据。下面，为了给帖子添加小图片，我们在CSS代码里额外设计一个id选择器 #mypic，并将图片标签作为帖子父元素的子元素放到HTML代码里：

<style>
/* 帖子父容器id选择器 */
#mama {
	position: relative;
	margin: 20px auto;
	width: 800px;
	height: 450px;
	background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}

/* 子元素小图片id选择器 */
#mypic {
	position: absolute; /* 绝对定位 */
	left: 10px; /* 左边位置 */
	top: 10px; /* 上边位置 */
	width: 160px;
	height: 160px;
}
</style>

<!-- HTML代码 ：父元素包裹一个子元素 -->
<div id="mama">
	<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>

点击查看效果

请对照代码和效果，领会图片绝对定位、左边和上边位置、宽高尺寸的代码设置对图片的直接作用。注意，子元素使用绝对定位 position: absolute; 依赖于父元素的相对定位 position: relative;设置，只有父元素设置了相对定位，子元素的绝对定位才真正有效、可控。left 属性用来设定元素的左方位值，10px 的 left 值表示图片作为子元素，它将位于离主元素左边缘 10px 的地方，而 top 用来设定上边位置，这里也是 10px，表示图片处在离主元素上边缘 10px 的地方，left 和 top 合起来共同决定了图片的具体位置：在主元素的左上角，离主元素上边缘、左边缘各10个像素。

设置元素位置，除了用 left、top 表示方位，还可以使用 right、bottom，right 是右边方位，表示离主元素右边缘的距离，bottom 是底边方位，表示离主元素底边边缘的距离。一横一纵的两两组合可以快捷定位子元素的具体位置，但是必须留意，两个横向的不能在一起使用，两个纵向的也不能在一起使用。

同时注意一下 img 标签的HTML代码，它的id属性 id="mypic" 指向CSS选择器 #mypic；alt 属性 alt="" 是为了代码合法需要：图片标签要求，当图片不能显示时应该有一个文本说明，你可以在引号里加入相应的文本，比如 alt="四叶草"，留空也可以；src 属性必须，用来表达图片地址，地址正确的话这个标签代码显示出来的就是该地址指向的图片。img标签是一个自闭合标签，它的收尾符直接就是 />，所有自闭合标签都是使用这个符号收尾。

我们可以给父元素添加很多子元素，例如三张相同的图片。下例，帖子父元素 id 改为 papa，因为前面的讲义提到过，一个页面里不能有相同的 id，此外我们使用类选择器即 .选择器名称 统一制定图片的样式，并通过 nth-of-type() 伪类选择器设定每一张图片的具体位置：

<style>
/* 帖子父容器id选择器 */
#papa {
	position: relative;
	margin: 20px auto;
	width: 800px;
	height: 450px;
	background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}

/* 子元素小图片class选择器 */
.mypic {
	position: absolute; /* 绝对定位 */
	width: 160px;
	height: 160px;
}
.mypic:nth-of-type(1) {
	left: 10px;
	top: 10px;
}
.mypic:nth-of-type(2) {
	right: 10px;
	bottom: 10px;
}
.mypic:nth-of-type(3) {
	left: calc(50% - 80px);
	top: calc(50% - 80px);
}
</style>

<div id="papa">
	<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
	<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
	<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>

点击查看效果

我们之前提到过关于CSS的设置特色，后面设置的属性会覆盖前面的设置，不雷同的属性设置则继续使用前面的设置。利用这一特点，我们先将图片的共同属性设置在 .mypic 选择器里，这一部分的设置的属性只要后来不被覆盖，那么，将是三张图片共同使用的，因为三张图片的HTML代码都使用了 class="mypic" 这个class类属性值。然后，我们又使用了 .mypic:nth-of-type(N) 这样的伪类选择器来逐一设定各自不同的属性设置，比如 left 或 right、top 或 bottom 等等。伪类选择器是CSS一个伟大的创意，它的出现使得CSS的灵活性大大加强，这里我们仅需要知道怎么用 :nth-of-type(N) 就行，它很简单，只需留意两点：一是伪类选择器为谁工作——冒号前面的是什么选择器它就为那个选择器工作，上例中，它们为 .mypic 选择器工作；二是它具体指哪一个HTML元素——N是多少就对应于HTML代码中相应标签按顺序自上往下的第几个，例中，1 对应第一个 class="mypic" 的img标签，2 对应于第二个，3 对应于第三个。

最后留一个小作业：在上述代码基础上，请再加上两个相同的小图片，第四个小图片放在帖子元素的左下角、第五个小图片放在右上角，这两张图片，每一张图片离帖子主元素最近的边缘都是10px。提示：CSS代码中，需要再添加两个 :nth-of-type() 伪类选择器，在HTML代码中，同样需要添加两个img标签。你可以将代码拿到 pencil code 中进行修改并预览效果。

【附】position相对定位与绝对定位

CSS的 position 属性用于设定元素的定位方式。当一个元素定设定为绝对定位，position: absolute;，虽然其默认（属性缺省，即不设置有left、top等方位定位属性时） left 和 top 均为 0，但是，它是否处在父元素的左上角并不确定，这将依赖于其父元素是否设置有的 position 属性，有，则子元素默认在它的左上角，没有，则子元素会去寻找更上一级的父辈元素即爷爷、太爷爷、太太爷爷等等，直到找到一个设置有 position 属性的祖先元素，就待在该元素的左上角。换言之，一个设置了绝对定位的元素，left 和 top 的方位设置以其父辈、祖父辈乃至年龄更大的某一代祖先为定位依据，按从小到大的顺序往上找，找到设置有 position 的第一个祖辈元素，以它的左上角作为自己的坐标参考。这就是为什么我们强调帖子元素设置 position 为 relative 的原因之一：这个设置对子元素具备约束力，其实就是给其下的子元素提供坐标依据。

返回目录