Блог

Главная - Вопросы по программированию - Возможно ли разместить что-либо перед iframe?

Возможно ли разместить что-либо перед iframe?

#html #css

#HTML #css

Вопрос:

Я встраиваю видео YouTube на страницу, и они отображаются поверх выпадающих меню, поверх лайтбокса и т.д. Я бы предпочел не использовать старый код для встраивания YouTube, но глупый iframe отвратительно помещает себя поверх любого другого элемента на странице. Возможно ли заставить это запомнить свое место?

Ответ №1:

окончательное обновление

Добавление ?wmode=transparent в конце URL-адреса iframe или amp;amp;wmode=transparent , если также передаются другие параметры, похоже, устраняет проблему для всех браузеров.

оригинальный ответ

Использование z-index в сочетании с позиционированием (относительным или абсолютным)

пример с выпадающим списком над видео YouTube (новый код) в http://jsfiddle.net/gaby/BS4Ww/3 /

Обновить

добавлено div поверх iframe , а также я неправильно понял выпадающий список

Комментарии:

1. <select> в любом случае находится над / перед iframe.

2. @A-ОК, опубликовал решение для всех браузеров, хотя оно предполагает изменение URL.

3. привет! я использую этот подход, и он работает нормально! Кстати, вот интересное объяснение, почему это работает именно так starikovs.com/2012/10/27/position-html-elm-over-youtube

Ответ №2:

Вы можете поместить как iframe, так и все, что вы хотите, поверх него внутри контейнера.

Затем для элементов, которые вы хотите разместить сверху, просто установите отрицательное верхнее поле.

Вот jsfiddle, чтобы показать, что я имею в виду.

Вы также можете использовать абсолютное позиционирование для элементов, которые вы хотите разместить впереди, но это обычно приводит к другим проблемам с сайтом.

Обновить

Похоже, вы пытаетесь пойти против обычного потока HTML. Вещи, которые идут первыми в HTML, обычно находятся «под» или перед тем, что идет после.

Однако вы можете взять элемент из обычного потока рендеринга HTML и расположить его абсолютно.

Я обновил jsfiddle, чтобы показать, как это делается. Имейте в виду, абсолютная позиция может привести к другим проблемам в дизайне вашего сайта.

Комментарии:

1. спасибо, но проблема в том, что #over стоит перед iframe на странице, вот так jsfiddle.net/6wXvA/11

2. Почему вы не можете изменить порядок? : ( То, что вы пытаетесь сделать, не является чем-то необычным, но, как правило, противоречит тому, как разработан HTML. Я обновил свой ответ.

3. Ну, у меня есть продукт с изображениями, которые открываются с помощью colorbox (например, lightbox), а под этими изображениями у меня есть видеоролики продукта на YouTube. Когда я нажимаю на изображения, открывается colorbox, но клипы YouTube находятся перед открытым изображением. Все элементы colorbox имеют позицию: absolute; top: 0; left: 0; z-index: 9999; так что это должно быть перед iframe, верно?

4. Я как-нибудь это исправлю, используя абсолютное позиционирование. Спасибо.

5. @A-ОК, просто установите iframe в position:relative значение и z-index:1 . Это устранит ваши проблемы без каких-либо побочных эффектов.

Ответ №3:

Попробуйте установить z-индекс для фрейма.

z-индекс

Комментарии:

1. голос отклонен, потому что простой тест на jsfiddle. net или аналогичный сайт показал бы, что это не работает.

Ответ №4:

вы можете использовать margin-top:12px; или что-то внутри вашего тега.

Комментарии:

1. Извините, я имею в виду НАД, как перед, я изменю заголовок.

2. вы размещаете youtube внутри iframe

3. да, теперь YouTube использует iframe для встраивания, это красиво и коротко, за исключением того, что iframe перекрывает любой другой элемент на странице

4. я думаю, вы можете применить css для iframe, например <iframe style=»margin-top12px;»>

Ответ №5:

Если вы поместите iFrame в div и установите z-индекс в div, это должно сработать. Я делаю это постоянно на работе.

Ответ №6:

для одного проекта мне нужна была похожая вещь. Я намеревался отобразить содержимое iframe, но не разрешать пользователю переходить по его ссылкам. Вместо этого я хотел указать пользователю на другой URL. Вот мое решение. Для работы в IE важно установить некоторый цвет фона для элемента over. 

  #over{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color:white; /* for unknow reason is color important for IE*/
        opacity:0;
        filter:alpha(opacity=0);    
    }

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

    <div>
        <div id="over" onclick="parent.location='....'"></div>
        <iframe src="...">You don't have iframe support, unfortunately</iframe>         
   </div>