Я пытаюсь создать сайт, который использует подобную технологию с использованием Google Site Site Overlay, но будет создавать собственный сайт. Я могу позже решить изменить тип наложения (или полностью исключить его), поэтому использование оверлея вместо прямой модификации исходных страниц является единственным вариантом, который я рассматриваю. На данный момент я также тестирую статическую панель, расположенную вверху (например, Google Analytics), которая будет использовать iframe ниже для обслуживания исходной страницы.Создание «Google Analytics» Как накладывается сайт
Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Test Overlay</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 40px 0 0 0;
overflow: hidden;
font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
min-width: 900px;
height: 30px;
padding: 5px 0;
line-height: 1;
background: #333;
color: #fff;
text-size: 1.2em;
}
#bar a {
padding: 0 5px;
color: #fff;
}
#frame {
width: 100%;
height: 100%;
z-index: 10;
}
#overlay_example
{
position: absolute;
left: 275px;
top: 275px;
font-size: 14px;
}
</style>
</head>
<body>
<div id="content">
<div id="bar">
<a href="http://mytestsite.com" title="overlay example">Test Site</a>
</div>
<div>
<iframe scrolling="auto" id="frame" src="http://www.google.com/search?hl=en&q=CSS+iframe+overlay" frameborder="0" ></iframe>
</div>
<div id="overlay_example">* Overlay Data *</div>
</div>
</body>
</html>
Однако главная проблема у меня в том, что на моем целевой веб-сайте (поиск Google в этом тесте), когда страницы прокрутки больше, чем видимая область экрана, а Я прокручиваю вниз, текст наложения остается статичным. Есть ли способ изменить CSS, чтобы текст наложения оставался рядом с тем, что я хочу, чтобы он накладывался на целевой сайт? Например, в случае результатов поиска Google, если бы я должен был наложить текст рядом с логотипом Google, текст наложения всегда оставался бы рядом с логотипом Google, так что, когда я прокрутил вниз достаточно далеко, чтобы логотип больше не отображался , текст оверлея также больше не рассматривался. Это работает так же, как Google Analytics, в том смысле, что я хочу, чтобы текст наложения был привязан к тексту, который он накладывает.
Пожалуйста, дайте мне знать, если я смогу ответить на любые вопросы о том, как я хотел бы работать.
Спасибо!