可能从标题,不知道我要说什么意思。
那么习惯性的,贴张图,再对这张图解释一下:
上面就是个简单的demo, 红色正方形的相当于是个问号,对前面的文字进行解释的。
之前这种设置都是将红色方框编程块级元素,然后定位,后来发现这种做法很愚蠢,增加了直接的工作量,而且父元素中的position:relative给自己带来的兼容性问题,有时很不容易排查。
当我把鼠标放在红色区域时,显示对这个内容的解释。上面的例子是经常在使用中的一种布局,所以特意写出来,"填坑"吧。
<style>
.dm {
padding:5px;
width:120px;
font-size:14px;
line-height: 1.5em;
background: #f4f4f4;
}
.dm div{display: inline-block;*display: inline;*zoom:1;width:20px;height: 20px;vertical-align:middle;background: red;position: relative;cursor:pointer;}
.dm div span {position: absolute;bottom:24px;font-size: 12px;line-height: 12px;padding:5px;width:260px;background: beige;color:#777;box-shadow: 0 0 3px rgba(3,3,3,0.3);border-radius:5px;display:none;}
.dm div span.lt {
left:20px;
}
.dm div:hover span{display: block;}
</style>
<div class="dm">
セクター単位/インテリジェントバックアップ<div><span class="lt">前者はすべてのセクターをバックアップしますが、後者は使用されたセクターのみバックアップします。</span></div>
</div>
上面的做法,无论我的内容如何变化,都能保证元素在适当的位置显示,而不是用定位的方法,如果内容变化了,这个布局也就打乱了。
这是内容增加后的效果:
总结自己以前的不足,让自己迈前一步。