Как совместить изображение перед верхней навигационной панелью twitter bootstrap?

Я хочу разместить изображение баннера на странице Twitter-загрузки Twitter, сверху верхней части изображения и перед верхней навигационной панелью.Как совместить изображение перед верхней навигационной панелью twitter bootstrap?

Мой html-код показан ниже. Он работает для небольшой ширины экрана, но для более широких экранов верхняя часть изображения появляется за навигационной панелью. Я использую Bootstrap v2.2.2.

Любые идеи, как сделать эту работу для всех размеров экрана? Очень признателен!

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     ... 
    </div> 
    <style type="text/css"> 
     .mypic {margin: -120px 0 -20px 10px;} 
    </style> 
    <div class="container"> 
     <div class="mypic"> 
      <img src="..." width="300"/> 
     </div> 
    </div> 
    ... 
</body>

источник

2013-02-10 Racing Tadpole

Вы пытались установить атрибут CSS z-index для высокого значения для вашего .mypic-класса? – clapas

Вы используете фиксированную навигационную панель. Должен ли быть исправлен и образ? –

Я попытался добавить позицию: relative; z-индекс: 9; к .mypic, но это не имело значения. @ Давид Тайароа - хороший вопрос ... нет, я не имел в виду, что картина должна быть исправлена. Вы заставили меня взглянуть ближе на его текущее поведение: с небольшой шириной экрана навигационная панель фактически не фиксируется. Я удалил класс «navbar-fixed-top», и теперь он делает то, что я хочу - спасибо! За исключением того, что navbar теперь не совсем наверху ... как я могу это исправить? –

Я не могу представить, куда вы направляетесь, но это старт?
http://jsfiddle.net/panchroma/xdv9m/

Возможно, вам придется использовать медиа-запросы, чтобы уточнить результаты для небольших размеров окна.

CSS

.mypic { 
margin: -120px 0 -20px 10px; /* play with these to position the image */ 
position:absolute; 
z-index:100; 
width:300px; 
}

Успехов!

источник

2013-02-11 01:59:14

Привет, спасибо Дэвиду. Ваш предыдущий комментарий решил это для меня - я просто удалил «navbar-fixed-top», а затем добавил тело: {padding-top: 0;}, и теперь у меня есть поведение, которое я хочу. Благодаря! –

Как совместить изображение перед верхней навигационной панелью twitter bootstrap?

ответ

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