Question

创建基本HTML页面时，应将徽标显示为横幅，徽标右下角有一个超链接。然后将iframe作为页面。将图像和iframe存储在2个单独的div中，然后将其放入div中。

问题是当我尝试添加时间时，它会将其加载到图像下方，而iframe位于阻止它的顶部。尝试了Z Index并搞乱了div ...有什么想法吗？

<!DOCTYPE html>
<head>
    <title>Interactive Map - Meath Field Names Project</title>
    <style>
    *{margin:0;padding:0}

    html, body 
    {
        height:100%;
        width:100%;
        overflow:hidden; 
        background-color:#E0DEDF;
    }

    iframe 
    {
        height:100%;
        width:100%
    }

    .content 
    {
        width: 100%;
        height:90%
    }

    .logoheader
   {        

        width: 100%;
        height: 10%;    
   }

   .fullPage
    {
        height:100%;
        width: 100%;
    }
    .hlink
    {
        z-index: 1;
        color:#ACD0D4; 
        font-size:26px; 
        font-family:verdana
    }

    </style>
</head>

<body>
    <div class="fullPage">
       <div class="logoheader">
        <img src="images/banner.png" alt="IMAGES" width="100%" />
        <a class="hlink" href="http://www.google.com/">Help Page</a> 
       </div>

       <div class="content">
            <iframe class="wrapper"//linktoIFrame</iframe>
       </div>
    </div>
</body>
</html>

Answer 1

以下两种解决方案似乎有效：

负边距 - 顶部，右侧浮动
添加一个位置相对且绝对定位链接的包装器;

＆＃13;

a.hlink {
    position: relative;
    margin-top: -1.5em;
    float: right;
    z-index: 5;
}

#wrapper {
    position; relative;   
}

#wrapper .otherlink{
    position: absolute;
    bottom: 3px;
    right: 3px;    
}

＆＃13;

<img src="images/banner.png" alt="IMAGES" width="100%" height="75" />
<a class="hlink" href="http://www.google.com/">Help Page</a> 

<p>more content</p><hr/>

<div id="wrapper" style="position:relative">
  <img src="images/banner.png" alt="IMAGES"  width="100%" height="75" /> 
  <a class="hlink" href="http://www.google.com/">Help Page</a>   
</div>

＆＃13;

如何在图像顶部加载超链接

1 个答案: