arrowTip 提示

锚点位置偏移与滚动条高度关系解析

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_30257433

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/brucehome/p/4563744.html

本文深入探讨了网页中锚点位置偏移与滚动条高度之间的关系，详细介绍了如何确保滚动条有足够的高度让标题到达指定位置，通过CSS样式实现精准定位。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>锚点位置偏移</title>
    <style type="text/css">
        body
        {
        }

        div
        {
            background-color: #fff;
            position: relative;
        }

        .text
        {
            width: 50%;
            height: 100px;
            margin: 10px;
            border-radius: 5px;
            border: 1px solid #f00;
            background-color: #ccc;
        }

        .arrowTip
        {
            border: 5px solid #ccc;
            border-color: transparent transparent #ccc transparent;
            width: 0px;
            line-height: 0px;
            height: 0px;
            position: absolute;
            display: block;
        }

        .top
        {
            left: 40px;
            top: -10px;
            border-color: transparent transparent #ccc transparent;
        }

        .left
        {
            border-color: transparent #ccc transparent transparent;
            left: 0px;
            top: 30px;
        }

        .right
        {
            border-color: transparent transparent transparent #ccc;
            left: 50%;
            top: 30px;
            margin-left: 12px;
        }

        .bottom
        {
            border-color: #ccc transparent transparent transparent;
            left: 50px;
            bottom: -10px;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <span class="arrowTip top"></span>
        <div class="text">top  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
    <div class="clear"></div>
    <div>
        <span class="arrowTip left"></span>
        <div class="text">left  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
    <div class="clear"></div>
    <div>
        <span class="arrowTip right"></span>
        <div class="text">right  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
    <div>
        <span class="arrowTip bottom"></span>
        <div class="text">bottom  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
    </div>
</body>
</html>