Изменить местоположение панели навигации, когда она будет перекрывать содержимое

Question

Изменить местоположение панели навигации, когда она будет перекрывать содержимое

0

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

Вот ссылка на мой код.

CSS

.navigation{
list-style-type: none;
position: absolute;
vertical-align: middle;
}

.navigation ul{
list-style-type: none;
padding: 0; 
text-align: right;
float: right;
vertical-align: middle;
}

.navigation li{
display: inline;
padding-left: 10px;
vertical-align: middle;
font-size: 24px;
}

.header .navigation{
position: absolute;
top: 0;
right: 20px;
}

HTML

<div class="navigation">
  <ul>
    <li><a class="live" href="index.html">Home</a></li>
    <li><a href="#">Unit 1</a></li>
    <li><a href="#">Unit 2</a></li>
    <li><a href="#">Unit 3</a></li>
 </ul>
</div>

Если вопрос не имеет смысла, сделайте окно результатов довольно большим, а затем увеличьте масштаб, и вы поймете, что я имею в виду.

user3161771 05 янв. 2014, в 05:17

Источник

0

Можете ли вы взглянуть на это и посмотреть, работает ли это? jsfiddle.net/HvJc5/4
BuddhistBeast 05 янв. 2014, в 04:07
0

@BuddhistBeast Это именно то, что я хочу, за исключением того, что я не могу получить изображение посередине с навигацией слева, но также и на той же «линии», если вы понимаете, о чем я.
user3161771 05 янв. 2014, в 15:01
0

Хм ... попробуйте это: jsfiddle.net/HvJc5/7, если вы увеличиваете и уменьшаете масштаб, изображение будет двигаться по центру при увеличении и вправо при уменьшении, сохраняя этот встроенный баланс.
BuddhistBeast 05 янв. 2014, в 18:45
0

@BuddhistBeast СПАСИБО ТАМ! Спасибо за помощь, парень, очень ценю это. : DD
user3161771 05 янв. 2014, в 20:45
0

Если бы вы могли щелкнуть мой ответ как правильный, это было бы здорово :)
BuddhistBeast 05 янв. 2014, в 20:53

Показать ещё 3 комментария

Теги:

html

css

navigation

2 ответа

0

Использовать свойство z-index

CSS

.header h1 a{
    display: inline-block;
    color: white;
    width: 135px;
    height: 50px;
    background: url(http://www.gpccolorado.com/wp-content/uploads/2013/10/Square-head.jpg);
    text-indent: -9999px;
    background-size: cover;
    z-index:500;
    position:relative;
}

Рабочая демонстрация

Sajad Karuthedath 05 янв. 2014, в 01:36

0

Хотя это полезно знать, это не то, что я хочу, так как после того, как это идет позади картинки, пользователи не могут использовать ссылки для навигации.
user3161771 05 янв. 2014, в 15:02

Ещё вопросы

Можете ли вы взглянуть на это и посмотреть, работает ли это? jsfiddle.net/HvJc5/4
@BuddhistBeast Это именно то, что я хочу, за исключением того, что я не могу получить изображение посередине с навигацией слева, но также и на той же «линии», если вы понимаете, о чем я.
Хм ... попробуйте это: jsfiddle.net/HvJc5/7, если вы увеличиваете и уменьшаете масштаб, изображение будет двигаться по центру при увеличении и вправо при уменьшении, сохраняя этот встроенный баланс.
@BuddhistBeast СПАСИБО ТАМ! Спасибо за помощь, парень, очень ценю это. : DD
Если бы вы могли щелкнуть мой ответ как правильный, это было бы здорово :)
Хотя это полезно знать, это не то, что я хочу, так как после того, как это идет позади картинки, пользователи не могут использовать ссылки для навигации.

BuddhistBeast · Accepted Answer · 2014-01-05T19-54-00.000Z

Вот что вы ищете:

DEMO

Кажется, у вас была картинка, плавающая влево, представленная этим CSS:

float: left;

это означало бы, что весь ваш контент будет справа от фотографии, независимо от того, что я сделал, и я просто взял эту строку кода и сделал изображение text-align:center; что означает, что фото будет оставаться центрированным независимо от того, что (давая вам это приятное отзывчивое движение).

Просто сделайте мне одолжение, держитесь подальше от эффектов позиции (относительный, абсолютный, фиксированный), если вам это абсолютно не нужно... плавать лучше использовать, потому что они реагируют гораздо лучше, чем эффекты позиционирования. Плюс, абсолютное позиционирование может определенно дать вам головную боль через некоторое время!

Надеюсь, это помогло :)