Question

是否可以在iframe上浮动导航栏这是我到目前为止的代码？

导航栏就像在html页面中一样，包含触发iframe转到下一页的按钮等。

有什么想法吗？

 <!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>Fraud Protection - Course</title>
<style>
    .backbutton[type="button"] {
        border: 0;
        background: url("back.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
        .nextbutton[type="button"] {
        border: 0;
        background: url("next.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
            .savebutton[type="button"] {
        border: 0;
        background: url("save.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
</style>
</head>
<body>

    <iframe src="" width="100%" class="naviframe" id="contentFrame" hieght="100%"></iframe>
    <div id="navDiv">
     <input type="button" class="backbutton" id="butPrevious" onclick="doPrevious();" value="<- Previous"/>
        <input type="button" class="nextbutton" value="Next ->" img src="/images/Btn.PNG" id="butNext" onclick="doNext();"/>
        <input type="button" class="savebutton" value="Save Progress"  img src="/images/Btn.PNG" id="butExit" onclick="doExit();"/>
    </div>

</body>
</html>

Answer 1

有可能使用position：absolute;

Answer 2

有可能。您必须将要浮动的元素定位为具有负边距的absolute。

Demo

Answer 3

导航栏的简单CCS：

.navDiv{
  position: absolute;
  top: 100px;
  left: 100px;
}

只需根据需要更改top和left的值即可。在这种情况下，这些值与document.body相关。

您的代码中的height - iframe属性中存在misstypo。此外，似乎iframe高度不允许百分比，您必须使用其他单位。

漂浮在iframes html上

3 个答案: