Позиционирование изображения и панели навигации друг над другом

#html #css #twitter-bootstrap #css-position #menubar

#HTML #css #twitter-bootstrap #css-позиция #панель меню

Вопрос:

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

             <div class="row">
                <div class="col-lg-offset-4">
                    <img src="./Images/WhiteRibbon.png" id="WhiteRibbonImg">



                    <nav class="navbar">
                        <ul class="nav navbar-nav">


                            <li class="dropdown" class="col-lg-2 col-md-2">

                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu Item</a>

                                <ul class="dropdown-menu">
                                    <li><a href="#">Suspendisse tincidunt</a></li>
                                    <li><a href="#">Suspendisse tincidunt</a></li>
                                    <li><a href="#">Suspendisse tincidunt</a></li> 
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

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

ИДЕАЛЬНО:

Что у меня есть прямо сейчас:

Ответ №1:

 /* Position the containing element */
div.col-lg-offset-4 { //Create a class amp; don't use bootstraps class name 
  position: relative; 
} 

img {
  position: absolute;
  z-index: 1;
  right: 0;
}

nav {
  position: absolute;
  z-index: 2;
  right: 0;
}

1. Задавая div relative позицию a и содержащие элементы ( img и nav ) absolute позицию, вы можете расположить оба элемента относительно их родительского элемента, которым является div . z-index позволяет укладывать элементы друг на друга. Изображение с большим номером укладывается поверх другого. Раньше я right: 0px размещал правый край элементов 0px вдали от div правого края, но вы можете использовать другие свойства положения top bottom и left получить желаемый вид. Надеюсь, это решит вашу проблему

Ответ №2:

Попробуйте сделать его абсолютным в вашем CSS

 display: absolute;

Ответ №3:

Попробуйте добавить z-index: 2 стиль CSS для вашего списка / элементов списка. z-индекс определяет расположение элементов. Элементы с более высоким значением располагаются поверх элементов с более низким значением. Каждый элемент имеет значение по умолчанию 1.