40、元素的垂直对齐 vertical-align

vertical-align 属性，设置元素的垂直对齐方式

值为：

  • baseline 默认。元素放置在父元素的基线上。
  • sub 垂直对齐文本的下标。
  • super 垂直对齐文本的上标
  • top 把元素的顶端与行中最高元素的顶端对齐
  • text-top 把元素的顶端与父元素字体的顶端对齐
  • middle 把此元素放置在父元素的中部。
  • bottom 把元素的顶端与行中最低的元素的顶端对齐。
  • text-bottom 把元素的底端与父元素字体的底端对齐。
  • length
    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

41、元素的堆叠顺序 z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）

例：

<html>
<head>
<style>
img {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="images/3.png" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

图片说明