Крепление Перекрытие Div

У меня есть один DIV внутри DIV:Крепление Перекрытие Div

<div id="opacnavigation" class="btn-toolbar" role="toolbar">   
    <div id="opacnavigation-btn" class="btn-group">    

     <button type="button" class="btn btn-success "> 
      <i class="icon-home"></i> 
      Home      
     </button> 

     <button type="button" class="btn btn-success">   
      <i class="icon-comment"></i> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       About the Library           
      </a>    

      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#" tabindex="-1" role="menuitem">Library Hours</a></li> 
       <li><a href="#" role="menuitem">Board of Visitors</a></li> 
       <li><a href="#" role="menuitem">Department and Staff</a></li>      
       <li><a href="#" role="menuitem">Direction Maps</a></li>      
       <li><a href="#" role="menuitem">Equipment</a></li> 
       <li><a href="#" role="menuitem">Floor Plans</a></li> 
       <li><a href="#" role="menuitem">Information and Policies</a></li> 
       <li><a href="#" role="menuitem">Mission and Vision</a></li> 
      </ul>  
     </button> 
     <button type="button" class="btn btn-success "> 
      <i class="icon-question-sign"></i> 
      Help 
     </button>          
    </div> 
</div>

Первый Div:

enter image description here

Второй Div:

enter image description here

Но почему внутренняя div перекрывает первый? Второй Div должен находиться внутри моего первый div.Here мой код CSS:

#opacnavigation{ 
    background-color: #0C6A13; 
    margin: 0; 
    border-top:2px solid; 
    border-bottom:2px solid; 
} 

#opacnavigation-btn{ 
    background-color: #0C6A13;   
    margin-left: 15px;     
    width: 100%; 
} 

.btn-group > .btn, 
.btn-group > .btn-group, 
.btn-group > .btn-group > .btn { 
    display: block; 
    float: none; 
    max-width: 92%; 
    width: 92%; 
    margin-left: 0; 
    margin-top: -1px; 
    margin-right: 20px; 
} 

.btn-group .btn + .btn, 
.btn-group .btn + .btn-group, 
.btn-group .btn-group + .btn, 
.btn-group .btn-group + .btn-group { 
    margin-left: 0px; 
} 

.btn-group > .btn:first-child:not(:last-child) { 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 4px; 
} 

.btn-group > .btn:first-child{ 
    margin-left: 0;    
}

Любая помощь будет очень признательна. Благодарю.

источник

2014-09-02 Anonymous

Не уверен, что вы подразумеваете под «перекрытием», но причиной его смещения является «margin-left: 15px;' on '# opacnavigation-btn', это то, о чем вы говорите? – Jason

, и вам не нужно указывать ширину '100%' для элемента блока, потому что она заполнит оставшуюся ширину его родителя. – Kyojimaru

Это должно быть из-за margin-left: 15px;, предоставленного #opacnavigation-btn.

Вычисленное смещение этого div будет добавлением ширины его родительского div и заданного поля.

Решение этого вопроса дает преимущество дочернему div.

источник

2014-09-02 06:46:32 karan3112

-> Есть ли в любом случае я мог бы поместить маржу, не затрагивая ее ширину div родителя? – 2014-09-05 02:27:57

Не указывайте ширину в div 'margin-left'. По умолчанию он будет занимать 'width' 100%, если это' position: relative'. – karan3112

м не уверены, что именно решение ур ищут ... но создали fiddle в соответствии с моим пониманием .. пожалуйста, импровизировать на что ...

удалить width:100% на #opacnavigation-btn, заменить корешок обивки

источник

2014-09-02 07:11:47 Anshul

Крепление Перекрытие Div

ответ

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