сделать ребенок DIV больше фиксированного положение родительского DIV

Question

Пожалуйста, смотрите на следующую скрипке: https://jsfiddle.net/a9ravkf5/3/

#navbar{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height:40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 
#sidebar{ 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 0; 
 
    height:100%; 
 
    width: 200px; 
 
    background-color: black; 
 
} 
 

 
#dropdown{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
    
 
} 
 

 
#content{ 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    min-height: 300px; 
 
    background-color: green; 
 
}

<div id="navbar"> 
 
</div> 
 

 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 

 
<div id="content"> 
 
</div>

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

Какое оптимальное решение для этого?

Answer 1

Ваш дочерний div больше, чем содержащий фиксированный div. Причина, по которой вы не можете видеть все это, потому что ваш #content div показан перед вашим фиксированным #sidebar div.

Попробуйте добавить z-index к #sidebar и #content дивы, как так:

#sidebar { 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 0; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: black; 
 
    z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content. 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    min-height: 300px; 
 
    background-color: green; 
 
    z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar. 
 
} 
 

 
#navbar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 

 
#dropdown { 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
}

<div id="navbar"></div> 
 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 
<div id="content"></div>

Answer 2

Является ли это то, что вам нужно? Вам необходимо установить соответствующий z-индекс для вашего содержимого div и боковой панели.

#navbar{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height:40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 
#sidebar{ 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 10; 
 
    height:100%; 
 
    width: 200px; 
 
    background-color: black; 
 
} 
 

 
#dropdown{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
    
 
} 
 

 
#content{ 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    z-index: 0; 
 
    min-height: 300px; 
 
    background-color: green; 
 
}

<div id="navbar"> 
 
</div> 
 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 

 
<div id="content"> 
 

 
</div>

Answer 3

вам нужно установить две вещи один ваш 'г-индекс', в #sidebar. , а другой - «min-height» в #content.

как

#sidebar{ 
    position: fixed; 
    top: 40px; 
    left: 0; 
    z-index: 10; 
    height:100%; 
    width: 200px; 
    background-color: black; 
} 
#content{ 
    position: absolute; 
    top: 40px; 
    left: 200px; 
    right: 0px; 
    min-height: 400px; 
    background-color: green; 
} 

и если вы хотите, чтобы исправить это, то добавить Z-индекс: -1; in #content