网页布局教程:边距和绝对定位
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-02
16.</p>
17.id="line17"
18..linkparent1 {
19. color: #a00;
20. }
21..linkparent:hover span {
22. left: auto;
23. } /* this hover on the link changes the nested span''s left value to
24.auto */
25..linkparent span {
26. position: absolute;
27. left: -999em;
28. border: 1px solid white;
29. background: #446;
30. color: white;
31. font-weight: bold;
32. padding: 2px 4px;
33. text-decoration: none;
34. } /* tooltip may be custom styled as desired */
35..linkparent:hover {
36.background: url(bgfix.gif);
37. } /* Applies 1x1 transparent bgfix.gif on hover - IE hover bug fix */
当鼠标经过“link-text”时，AP出现在窗口之中，自动定位将其放在一个内联span应该出现的位置上，即使span是绝对定位，并且是一个块元素，就浏览器而言，绝对定位的span元素像内联元素那样，同时它又是拥有诸如margin、padding和border等属性的块元素。 同时，回忆一下第二个演示页，我给span特定的定义了“display：block”属性，那样，所有非IE浏览器将span放置到新一行上，并且是从段落的左侧开始。这样，我们看到元素并无多大改变，而是对其自动定位属性产生了影响。（IE除外） 这非常有趣，但一点也不影响我们的margin实验。我只是让你认识到这一点，因为有时候，它会在你毫不知情的情况下使你困惑。 Margins初探 我们想让AP span弹出框的位置出现的第一点，更靠左一些，使其叠在父链接之上。这样看起来更酷，而且他们重叠，确保用户来回移动鼠标不会使弹出框消失。 这是同样的demo，但是其top边距向下移，right边距左移，这样就出现在父链接之前，增加以下代码： view sourceprint?1..first-offset-test span {
2.margin-top: .8em;
3.margin-right: 50px;
4.}
现在，鼠标经过链接文本时看到变化没有？弹出层较以前下移了一些。不错，但它并没有向左移！Right边距看来并未生效。让我们从不同的方向试试－－用负的left边距代替正的right边距。 view sourceprint?1..second-offset-test span {
2.margin-top: .8em;
3.margin-left: -50px;
4. }
这是 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: CSS教程:CSS选择器性能下一篇: CSS教程:简化CSS选择器
关于网页布局教程:边距和绝对定位的所有评论
