центр DIV в течение нескольких дивы

Так что я с трудом совмещении DIV над другой DIV с кучей изображений как (псевдо-) «фон», как это:центр DIV в течение нескольких дивы

http://i.imgur.com/uHmcBlB.png

Но я «ве пытался позиционировать его как абсолютное и относительное, и это всегда заканчивается так:

http://i.imgur.com/9gDaSIe.png

Мой код:

<body class="site com_content view-featured no-layout no-task itemid-101"> 

<!-- Body --> 
<div class="body"> 
    <div class="container"> 
     <div class="row-fluid"> 
      <main id="content" role="main" class="span12"> 
       <!-- Begin Content --> 

       <div id="modInistagram"> 
        <div class="cbinstaphotobox"> 
         <div class="col-lg-12"> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
          <figure class="figurefx dualpanels"> 
           <img> 
          </figure> 
         </div> 
        </div> 
       </div> 
      <div class="custom"> 
       <div class="logo"> 
        <img src="tcsslogosmall.png" alt="logo"> 
        <div class="socialicons"> 
         <a href="facebook.com/YYYshop"> 
          <img src="fb.png"> 
         </a> 
         <a href="instagram.com"> 
          <img src="instgr.png"> 
         </a> 
        </div> 
        <div class="contacts"> 
         <h4 style="text-align: center;"></h4> 
        </div> 
       </div> 
      </div> 
      <!-- End Content --> 
     </div> 
     </div> 
     </main> 
    </div> 
    </div> 
    </div> 
    </body>

«Пользовательский» div - это тот, который я хочу «плавать» над «modInstagram».

источник

2015-07-23 Sauce

'позиция: фиксированная; top: 0; left: 0; bottom: 0; right: 0; ' – Morpheus

Где ваш css? – Manwal

My bad ... https://jsfiddle.net/24157Lmf/ – Sauce

Если вы обертываете изображения и накладываете на родительский элемент с помощью position: relative, вы сможете использовать position: absolute на элементе overlay, чтобы разместить его поверх изображений.

Вот краткий пример: https://jsfiddle.net/hmpxdezy/1/

Отредактированный ответ:

Основе ваш jsFiddle, это div.custom вы хотите расположить в верхней части div#modInistagram?

Если это так, вот обновленная скрипка, чтобы дать вам представление о том, как добиться того, что вы хотите с существующей разметкой: https://jsfiddle.net/24157Lmf/1/

Вам нужно добавить position: relative к main#content и добавить position: absolute к div.custom. Оттуда вы можете центрировать выравнивающий элемент с помощью аналогичного метода с моим original jsFiddle с left: 50% и отрицательным margin-left со значением, которое составляет половину ширины элемента, который вы хотите центрировать.

источник

2015-07-23 11:25:48 tenderloin

центр DIV в течение нескольких дивы

ответ

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