Css div поверх div: html — Как расположить div поверх других блоков div?

html — CSS блок поверх всего контента

Вопрос задан 7 лет 1 месяц назад

Изменён 1 год 11 месяцев назад

Просмотрен 101k раза

Есть блок с краю экрана небольшой. При наведении он расширяется. Проблема в том, что он «выезжает» не поверх моего контента, а под него. Точнее только под картинки (скриптовые банеры с прокруткой и тп.) Можно ли сделать так, что бы он выезжал поверх всего? CSS:

  div.nav  {    
        display: block;
        position: fixed;
        right:6px;
        top: 80%;
        display:block;
        height:160px;
        width:33px;
        background:url(../img/helpback.jpg) no-repeat;        
        line-height:50px;
        transition:all .7s ease-out;
        border: 1px solid #333;
        border-radius: 2em;
    }
    div.  nav:hover {
        position: fixed;
        right: 5px;
        top: 80%;
        width:347px;
        height:160px;  
        display: block;        
    }  

• html
• css

3

Добавьте правилу div.nav свойство z-index: 999999;

Строго говоря, ваш элемент должен иметь значение z-index большее, чем положение по z-оси других элементов страницы, т. е. и значения z-index: 100; может быть достаточно

1

Просто поставь z-index больше остальных.

---

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index.

Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Источник

0

div.nav:hover {
        position: fixed;
        right: 5px;
        top: 80%;
        width:347px;
        height:160px;  
        display: block;
        z-index:99999999;        
    }  

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Сделать так, чтобы блок div располагался поверх элемента object

Задать вопрос

Вопрос задан 8 лет 6 месяцев назад

Изменён 5 лет 4 месяца назад

Просмотрен 867 раз

Приветствую! Нужно сделать так, чтобы блок div (в данном случае текст) располагался поверх элемента object, делаю так , но ничего не получается

#layer {
  z-index: 1;
  position: absolute;
}

#flashob {
  position: relative;
  z-index: 0;
  margin: 0 auto;
}

<div>
  <h2>text</h2>
</div>
<div>
  <object classid="clsid:CAFEEFAC-0016-0000-FFFF-ABCDEFFEDCBA" codebase="http://java. sun.com/update/1.6.0/jinstall-6-windows-i586.cab#Version=6,0,0,0">
        <param name="code" value="com.jscape.ftpapplet.FtpApplet.class">
        <param name="archive" value="client.jar">
        <param name="scriptable" value="false">
        <param name="wmode" value="opaque">
        <embed type="application/x-java-applet;version=1.6" code="com.jscape.ftpapplet.FtpApplet.class" archive="client.jar" name="anyclient-enterprise" scriptable="false" pluginspage="http://java.sun.com/products/plugin/index.html#download" wmode="opaque"></embed>
        </object>
</div>

• html
• css

2

#flashob {
  position:relative; 
}

#layer {
  position:absolute; 
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<div>
  <object classid="clsid:CAFEEFAC-0016-0000-FFFF-ABCDEFFEDCBA" codebase="http://java. sun.com/update/1.6.0/jinstall-6-windows-i586.cab#Version=6,0,0,0">
    <param name="code" value="com.jscape.ftpapplet.FtpApplet.class">
    <param name="archive" value="client.jar">
    <param name="scriptable" value="false">
    <param name="wmode" value="opaque">
    <embed type="application/x-java-applet;version=1.6" code="com.jscape.ftpapplet.FtpApplet.class" archive="client.jar" name="anyclient-enterprise" scriptable="false" pluginspage="http://java.sun.com/products/plugin/index.html#download" wmode="opaque"></embed>
  </object>
  <div>
    <h2>text</h2>
  </div>
</div>

<object>
    <param name="wmode" value="transparent" />
    <embed
    wmode="transparent">
    </embed>
</object>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Наложение без свойства z-index — CSS: каскадные таблицы стилей

Если свойство z-index

не указано ни для одного элемента, элементы располагаются в следующем порядке (снизу вверх):

1. Фон и границы корневого элемента.
2. Непозиционированные элементы-потомки в порядке появления в HTML.
3. Элементы, расположенные по наследству, в порядке появления в HTML.

См. типы позиционирования для объяснения позиционированных и непозиционированных элементов.

Имейте в виду, что когда свойство порядка изменяет порядок отображения в HTML в контейнерах flex , это аналогичным образом влияет на порядок размещения контекста.

В этом примере DIV #1 — DIV #4 являются позиционируемыми элементами. DIV № 5 является статическим и поэтому отображается под остальными четырьмя элементами, несмотря на то, что он появляется позже в разметке HTML.

HTML

 

  DIV #1
позиция: абсолютная;
 
<дел>
  DIV #2
позиция: относительная;