Как загрузить гиперссылку ontop изображения

-1

Создание базовой HTML-страницы должно содержать логотип как баннер с гиперссылкой в правом нижнем углу логотипа. Затем iframe как страница. Сохранение изображения и iframe внутри 2 отдельных divs, затем поместите это внутри div.Как загрузить гиперссылку ontop изображения

Проблема в том, когда я пытаюсь добавить время, оно загружает его под изображением, а iframe сидит на столе, блокируя его. Попробовали Z Index и возились с divs ... любые идеи?

<!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>

источник

2014-11-07 John

Чтобы использовать 'г-index' вам нужно использовать' position' Aswell. – melancia

, который исправил это приветствие @MelanciaUK – John

@ -1 спасибо за ваш вклад, каждый имеет право на собственное мнение, но Лев не заботится о мнении овец .... ПРИМЕЧАНИЕ .. Было бы так же быстро объяснять позицию вместо отрицательности, но meeeehhhhh некоторые люди – John

следующих двух решений похоже на работу:

Отрицательный Запас-топ с поплавковым справа по ссылке
Добавление обертку с позиции относительного и абсолютного позиционирования ссылку;

a.hlink { 
 
    position: relative; 
 
    margin-top: -1.5em; 
 
    float: right; 
 
    z-index: 5; 
 
} 
 

 
#wrapper { 
 
    position; relative; 
 
} 
 

 
#wrapper .otherlink{ 
 
    position: absolute; 
 
    bottom: 3px; 
 
    right: 3px;  
 
}

<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>

источник

2014-11-07 11:18:16

да я отсутствовал, когда я добавил z-index, спасибо за помощь – John

Как загрузить гиперссылку ontop изображения

ответ

Смежные вопросы