A menu that I need to overlap that image, but the menu is longer (taller) than the image.
So I need the menu to push the DIV down where the image <img> tag sits.
Otherwise, the menu overlaps the site's template footer.
The containing DIV is position: relative. The overlapping menu is position:absolute.
HTML and CSS as below.
The m. classes are for mobile, and it is that where the issue is.
Code: Select all
<style>
.loadout
{
position: relative;
text-align: center;
}
.loadout a
{
text-decoration: none;
color: #000000;
}
.loadout img
{
width: 100%;
}
.loadout-helmets
{
display: none;
}
.loadout-goggles
{
display: none;
}
.loadout-masks
{
display: none;
}
.loadout-patches
{
display: none;
}
.loadout-gloves
{
display: none;
}
.loadout-vests
{
display: none;
}
.loadout-pouches
{
display: none;
}
.loadout-pistols
{
display: none;
}
.loadout-holsters
{
display: none;
}
.loadout-clothing
{
display: none;
}
.loadout-scopes
{
display: none;
}
.loadout-accessories
{
display: none;
}
.loadout-guns
{
display: none;
}
.loadout-magazines
{
display: none;
}
.loadout-batteries
{
display: none;
}
.loadout-bipods
{
display: none;
}
.m-loadout-container
{
background: rgba(255, 255, 255, 0.7);
position: absolute;
top: 0;
width: 100%;
}
.m-loadout-boxes
{
border-bottom: 1px solid #ff5500;
padding: 8px;
text-align: center;
color: #000000;
text-transform: uppercase;
}
.loadout-bottom-text
{
background-color: #333333;
padding: 15px;
color: #ffffff;
text-align: center;
}
}
</style>
</div><div class='cat_head'><h1>airsoft loadout</h1></div><div class='mainbodybox'><br/>
<div class='loadout'>
<img src='/images/loadout.jpg' />
<div class='loadout-helmets'>tactical helmets</div>
<div class='loadout-goggles'>goggles and glasses</div>
<div class='loadout-masks'>airsoft masks</div>
<div class='loadout-patches'>patches</div>
<div class='loadout-gloves'>gloves</div>
<div class='loadout-vests'>tactical vests</div>
<div class='loadout-pouches'>pouches</div>
<div class='loadout-pistols'>pistols</div>
<div class='loadout-holsters'>holsters</div>
<div class='loadout-clothing'>clothing</div>
<div class='loadout-scopes'>scopes and sights</div>
<div class='loadout-accessories'>gun accessories</div>
<div class='loadout-guns'>guns</div>
<div class='loadout-magazines'>magazines</div>
<div class='loadout-batteries'>batteries</div>
<div class='loadout-bipods'>bipods</div>
<div class='m-loadout-container'>
<div class='m-loadout-boxes'>tactical helmets</div>
<div class='m-loadout-boxes'>goggles and glasses</div>
<div class='m-loadout-boxes'>airsoft masks</div>
<div class='m-loadout-boxes'>patches</div>
<div class='m-loadout-boxes'>gloves</div>
<div class='m-loadout-boxes'>tactical vests</div>
<div class='m-loadout-boxes'>pouches</div>
<div class='m-loadout-boxes'>pistols</div>
<div class='m-loadout-boxes'>holsters</div>
<div class='m-loadout-boxes'>clothing</div>
<div class='m-loadout-boxes'>scopes and sights</div>
<div class='m-loadout-boxes'>gun accessories</div>
<div class='m-loadout-boxes'>guns</div>
<div class='m-loadout-boxes'>magazines</div>
<div class='m-loadout-boxes'>batteries</div>
<div class='m-loadout-boxes'>bipods</div>
</div>
</div>
</div>
<div class='loadout-bottom-text'>
Text here to explain adsjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau sjkf haskjfh ask fsakd flsad hflisa flsau </div><div class='mainbodybox'>