<!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>
知識點(diǎn)
1、rotate 表示旋轉(zhuǎn)的角度。 正角度表示了順時針的旋轉(zhuǎn)，負(fù)角度表示逆時針的旋轉(zhuǎn)菱肖。
2夭禽、relative（相對定位）：生成相對定位的元素袜茧，通過top,bottom,left,right的設(shè)置相對于其正常（原先本身）位置進(jìn)行定位茶宵」讣校可通過z-index進(jìn)行層次分級而克“凶常 absolute（絕對定位）：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位员萍。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定亮钦。可通過z-index進(jìn)行層次分級充活。
3蜂莉、z-index 表示在上面或者下面顯示，為正數(shù)時在上面混卵，為負(fù)數(shù)時在下面映穗。所以如果說top， left 會影響x軸和y軸上的位置幕随，那么 z-index 就會影響元素在z軸上的位置蚁滋。這樣即使在有重疊的情況下，也可以決定哪一個元素顯示在哪一個的上面赘淮。但比較復(fù)雜的是辕录，z-index 不是影響元素在z軸位置上的唯一的因素。
