Question

有两件事：

或者是一个混蛋
或者我发现了一个错误

我有一个包含iframe的网页。

我想在iframe的左下方放置一个图标。所以我认为我可以用jquery-ui这个位置做到这一点。

这是我的尝试不起作用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>test positionLogo</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"
          type="text/css" media="screen"/>
    <style type="text/css">
        div.positionLogo {
            width: 64px;
            height: 64px;
            position: absolute;
            display: block;
            text-align: center;
            background: #FFFFFF url(http://qooxdoo.org/_media/stackoverflow.png) no-repeat center;
        }
    </style>
</head>
<body>

<h2>Header</h2>

<iframe id="idIframe" name="idIframe" scrolling="no" height="1600px" width="100%" src="http://www.google.it"
        frameborder="0"></iframe>

<div class="positionLogo"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $(".positionLogo").position({
            of:$("#idIframe"),
            my:"left bottom",
            at:"left bottom"
        });
    });
</script>

</body>
</html>

好消息是，如果您更改 iframe 选项的高度 height="1600px"至height="300px"

小部件正常工作！：S

怎么可能？感谢

Answer 1

您需要使用位置小部件的碰撞选项（将其设置为无）。默认值为flip，它会尝试自动调整您的位置（到页面的可见部分）

http://jqueryui.com/demos/position/#option-collision

$(document).ready(function () {
        $(".positionLogo").position({
            of:$("#idIframe"),
            my:"left bottom",
            at:"left bottom",
            collision: 'none'
        });
    });

滚动条时jQuery-UI位置不起作用

1 个答案: