html 浮动提示文本框,html浮动提示框功能如何实现 html浮动提示框功能实现代码...

本篇文章小编给大家分享一下html浮动提示框功能实现代码，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一般的表单提示总会占据表单的位置，让表单边长，或者变宽，影响布局，但如果让像对话框一样浮在所需内容旁边就可以解决这一问题。

HTML及样式

首先做一张表单

注册

然后我们需要设计一下对话框

大概就是这样，由一个三角形和矩形组成。

#tips{

padding-top: 6px;

z-index: 9999;

/*让对话置顶以免被其他元素遮挡*/

position: fixed;

width: 1000px;

}

#form-tips{

background-color: black;

color: #ffffff;

padding: 0 6px;

position: absolute;

}

#triangle{

border:10px solid;

border-color: transparent black transparent transparent;

}

这是一个提示

三角形怎么来的？参考这篇经验

js实现浮动