我在固定高度的 div 中有一个 Bootstrap 下拉菜单,其中包含可滚动的内容 (overflow-y: scroll;)
。我的问题是,当菜单的高度变长时,它会隐藏在其父 div 内,因为它具有垂直滚动条。我想以全尺寸显示它(在其父级上方)。 z-index 不适用于此。
.highlights-box {
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
font-size: 17px;
font-family: camberia;
padding-left: 0px;
padding-right: 0px;
margin-top: 7px;
}
.highlights-box h1 {
font-family: camberia;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
font-weight: normal;
}
.unesco {
padding-top: 2px;
padding-bottom: 2px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding-left: 20px;
font-size: 18px;
}
.city-heading {
font-weight: bold;
text-decoration: underline;
text-align: center;
padding-top: 7px;
padding-bottom: 7px;
text-transform: uppercase;
}
.monuments {
height: 200px;
overflow-y: scroll;
padding-left: 10px;
padding-right: 10px;
}
.monuments li {
list-style: none;
padding: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
}
.highlights-box .dropdown-menu {
top: 66%;
left: 100px;
z-index:9999;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li {
padding: 0px;
}
.dropdown-menu li a:hover {
font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-6 col-xs-12 highlights-box">
<h1>Tour Highlights</h1>
<div class="unesco" style="border-bottom:none; padding-top:8px; padding-bottom:5px;">U = UNESCO World Heritage Site</div>
<div class="unesco" style="border-top:none; padding-bottom:8px">E = Unique Experience</div>
<div class="monuments" id="monuments">
<div class="city-heading">
<a id="Delhi"></a>
<div class="city-heading dropdown dropdown-toggle"><span onclick="scrollDiv('Delhi',jQuery(this))">Delhi</span><span class="caret"></span>
<ul class="dropdown-menu">
<li onclick="scrollDiv('Varanasi',jQuery(this))"><a href="javascript:void(0)">Varanasi</a></li>
<li onclick="scrollDiv('Agra',jQuery(this))"><a href="javascript:void(0)">Agra</a></li>
<li onclick="scrollDiv('Abhaneri (Enroute)',jQuery(this))"><a href="javascript:void(0)">Abhaneri (Enroute)</a></li>
<li onclick="scrollDiv('Ranthambore',jQuery(this))"><a href="javascript:void(0)">Ranthambore</a></li>
<li onclick="scrollDiv('Jaipur',jQuery(this))"><a href="javascript:void(0)">Jaipur</a></li>
<li onclick="scrollDiv('Ranakpur',jQuery(this))"><a href="javascript:void(0)">Ranakpur</a></li>
<li onclick="scrollDiv('Udaipur',jQuery(this))"><a href="javascript:void(0)">Udaipur</a></li>
<li onclick="scrollDiv('Mumbai',jQuery(this))"><a href="javascript:void(0)">Mumbai</a></li>
<li onclick="scrollDiv('Aurangabad',jQuery(this))"><a href="javascript:void(0)">Aurangabad</a></li>
<li onclick="scrollDiv('Cochin',jQuery(this))"><a href="javascript:void(0)">Cochin</a></li>
<li onclick="scrollDiv('Backwaters',jQuery(this))"><a href="javascript:void(0)">Backwaters</a></li>
</ul>
</div>
</div>
<li>Qutab Minar - U</li>
<li>Guided walk through ancient spice bazaar in Chandni Chowk - E</li>
<li>Red Fort - U</li>
<li>Rickshaw Ride in Old Delhi's Crowded Bazaar - E</li>
<li>India Gate</li>
<li>National Museum</li>
<li>Humayun's Tomb - U</li>
<li>Bangla Sahib Gurudwara - E</li>
<li>Jama Masjid</li>
<div class="city-heading">
<a id="Varanasi"></a>Varanasi</div>
<li>Sunset Arti prayer ceremony on the holy river - E</li>
<li>Sunrise and Sunset boat cruises on the holy river - E</li>
<li>Sarnath Archaelogical Museum*</li>
<div class="city-heading">
<a id="Agra"></a>Agra</div>
<li>Agra Fort - U</li>
<li>Taj Mahal (Both sunrise and sunset visits) - U</li>
<div class="city-heading">
<a id="Abhaneri (Enroute)"></a>Abhaneri (Enroute)</div>
<li>Rajasthani Village Walk - E</li>
<li>Chand Baori Stepwell</li>
<div class="city-heading">
<a id="Ranthambore"></a>Ranthambore</div>
<li>Wildlife Safaris</li>
<li>Ranthambore Fort</li>
<div class="city-heading">
<a id="Jaipur"></a>Jaipur</div>
<li>Amber Fort and Palace - U</li>
<li>Jantar Mantar - U</li>
<li>City Palace</li>
<li>Hawa Mahal (Palace of the Winds)</li>
<li>Monkey Temple - E</li>
<li>Elephant Ride to Amer Fort - E</li>
<li>Camelback (or Camel cart) safari at Samode - E</li>
<li>Rajasthani Lunch at Samode Palace</li>
<div class="city-heading">
<a id="Ranakpur"></a>Ranakpur</div>
<li>15th Century Jain Temple</li>
<li>Purebred Marwari Horse Ride - E</li>
<div class="city-heading">
<a id="Udaipur"></a>Udaipur</div>
<li>City Palace</li>
<li>Crystal Gallery</li>
<li>Monsoon Palace Excursion - E</li>
<li>Boat Cruise on Lake Pichola</li>
<li>Three Wheeler (Tuk Tuk) ride through the streets of Udaipur - E</li>
<div class="city-heading">
<a id="Mumbai"></a>Mumbai</div>
<li>The Gateway Of India</li>
<li>Prince of Wales Museum</li>
<li>The Victoria Terminus - U</li>
<li>Drive on the Queen's Necklace (Marine Drive)</li>
<li>Historic Flora Fountain and Fort area exploration</li>
<li>Mumbai's Launderers - Old Traditional Dhobi Ghats - E</li>
<div class="city-heading">
<a id="Aurangabad"></a>Aurangabad</div>
<li>Ajanta Caves - U</li>
<li>Ellora Caves - U</li>
<div class="city-heading">
<a id="Cochin"></a>Cochin</div>
<li>Cherai Island - E</li>
<li>15th Century Synangogue</li>
<li>St. Francis Church</li>
<li>Chinese Fishing Nets</li>
<li>Fort Kochi historic architecture</li>
<li>Kathakali Dance Performance</li>
<li>Dinner and cooking lesson with a famous Keralan chef - E</li>
<div class="city-heading">
<a id="Backwaters"></a>Backwaters</div>
<li>Cruise through the idyllic backwaters - E</li>
</div>
</div>
这里是 fiddle
最佳答案
问题是因为当 position:absolute
元素在同时具有 position:relative
和 overflow:hidden 或 scroll
的父级内部时,它们将被他们的 parent 裁剪。
解决方案是在两个父级别上分别设置这些样式:将 position: relative
设置为绝对元素的直接父级,但设置 overflow
(滚动或隐藏) 在祖 parent 元素上!如以下模式:
<div class="grand-parent"> => position: relative;
<div class="parent"> => overflow: hidden; (or scroll;)
<div class="child"> => position: absolute;
</div>
</div>
</div>
对于您的情况,我们可以使用现有元素来实现。
将
position:relative
添加到.highlights-box
div 中作为我们的祖 parent 。overflow-y: scroll
设置在.monuments
div 上。这充当中间 parent 。然后我们通过修改
.city-heading
类来覆盖.dropdown
的position:relative
使得.city -heading
是正常(静态)位置元素。
样式变化如下:
.highlights-box {
...
position: relative; /* !!EDIT!! ensure pos:relative of grand-parent */
}
.city-heading {
...
position: static; /* override position:relative of .dropdown */
}
.highlights-box .dropdown-menu {
top: 53%; /* better position than 66% */
...
}
这里是 updated fiddle.
关于html - 固定高度 div 内的 Bootstrap 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42801104/