<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tooltip,
.bubble,
.prompt-box {
width: 120px;
height: 60px;
margin: 50px;
background-color: #fff;
border: 1px solid #d2d2d2;
position: relative;
}
.tooltip::before,
.bubble::before {
content: "";
width: 10px;
height: 10px;
background-color: #fff;
border-left: 1px solid #888;
border-top: 1px solid #888;
transform: rotatez(45deg);
position: absolute;
top: -6px;
left: 10px;
}
.bubble::before {
background-color: #888;
z-index: -1;
}
.prompt-box::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top: 8px solid red;
border-right: 8px solid red;
position: absolute;
right: 0;
</style>
</head>
<body>
<div class="bubble"></div>
<div class="prompt-box"></div>
<div class="tooltip"></div>
</body>
</html>
知識點
1、rotate 表示旋轉的角度。 正角度表示了順時針的旋轉，負角度表示逆時針的旋轉。
2、relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設置相對于其正常（原先本身）位置進行定位。可通過z-index進行層次分級?！ bsolute（絕對定位）：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定?？赏ㄟ^z-index進行層次分級。
3、z-index 表示在上面或者下面顯示，為正數(shù)時在上面，為負數(shù)時在下面。所以如果說top， left 會影響x軸和y軸上的位置，那么 z-index 就會影響元素在z軸上的位置。這樣即使在有重疊的情況下，也可以決定哪一個元素顯示在哪一個的上面。但比較復雜的是，z-index 不是影響元素在z軸位置上的唯一的因素。
