欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    定位提示工具
 
    以下实例中,提示工具显示在指定元素的右侧(left:105%)。
 
    注意top:-5px同于定位在容器元素的中间。使用数字5因为提示文本的顶部和底部的内边距(padding)是5px。
 
    如果你修改padding的值,top值也要对应修改,这样才可以确保它是居中对齐的。
 
    在提示框显示在左边的情况也是这个原理。
 
    显示在右侧:
 
.tooltip .tooltiptext {
 
    top: -5px;
 
    left: 105%; 
 
}
 
    显示在左侧:
 
.tooltip .tooltiptext {
 
    top: -5px;
 
    right: 105%; 
 
}
 
    如果你想要提示工具显示在头部和底部。我们需要使用margin-left属性,并设置为-60px。这个数字计算来源是使用宽度的一半来居中对齐,即:width/2(120/2=60)。
 
    显示在头部:
 
.tooltip .tooltiptext {
 
    width: 120px;
 
    bottom: 100%;
 
    left: 50%; 
 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
 
}
 
    显示在底部:
 
.tooltip .tooltiptext {
 
    width: 120px;
 
    top: 100%;
 
    left: 50%; 
 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
 
}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r63804.shtml