Можно ли использовать div с индексом z-index?

Я пытаюсь сделать макет, где навигационная панель находится в div поверх изображения. Im использует z-index для этого. Я попытался сделать изображение фоновым изображением, но я не смог его правильно масштабировать при изменении размера окна браузера.Можно ли использовать div с индексом z-index?

Z-index работает нормально, но теперь мой div, который будет содержать навигацию, больше не будет плавать вправо.

В любом случае, чтобы исправить это?

<head> 
    <meta charset="UTF-8"> 
    <style type="text/css"> 
    body{ 
    } 
    #container{ 
     width: 100%; 
     height: 1000px; 
     background-color: yellow; 
     position: relative; 
    } 
    #blue{ 
     margin-top: 20%; 
     width: 50%; 
     height: 10%; 
     background-color: blue; 
     float: right; 
     position: absolute; 
     z-index: 10; 
    } 
    #test_image{ 
     width: 100%; 
     position: absolute; 
     z-index: 5; 
    } 
    </style> 
</head> 


<body> 
    <div id="container"> 
     <img id="test_image" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/test_zpsfbvzo3ij.jpg"> 
     <div id="blue"></div> 
    </div> 
</body>

источник

2015-03-23 Arsinek

Позиция: фиксированный с плавающей точкой не имеет смысла. – j08691

Действительно - вопрос, кажется, строится на ошибочном предположении, что z-индекс является проблемой, а не абсолютным позиционированием (включая фиксированное позиционирование). – BoltClock

, так как вы используете position:fixed; вместо float:right; использования:

right: 0;

Чтобы сделать изображение отзывчивым самый простой способ установить это сделать нужный элемент в качестве фона изображения с помощью:

background: url(yourBGimage.jpg) 50%/cover;

Не знаете, почему вы используете чрезмерно fixed, но вот только один пример, чтобы отразить эти строки (и без г-индексного материала): jsBin demo

источник

2015-03-23 02:40:34

Спасибо. Правильно: 0 похоже на трюк. Я также изменил фиксированный на абсолютный. Я попробую ваш фоновый пример и посмотрю, как это работает. – Arsinek

@ Арсинек, пожалуйста. Счастливое кодирование –

Для фона в качестве подхода изображения вы пробовали?

background-size: cover;

источник

2015-03-23 02:39:43

Можно ли использовать div с индексом z-index?

ответ

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