Tengo el siguiente código html que se muestra en una parte de las entradas de WordPress
#descarga {
position: relative;
}
.overlay{
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("https://i.sstatic.net/ZdcUt.gif") center no-repeat;
}
fieldset.fieldbox {
display: block;
margin-left: 3px;
padding-top: 2px;
text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
border-top: 4px solid #464646;
border-bottom: 4px solid #464646;
border-left: 4px solid #464646;
border-right: 4px solid #464646;
border-radius: 5px;
}
div.enlaces_box, .enlaces_box span, .enlaces_box a, .enlaces_box img, .enlaces_box b, .enlaces_box i, .enlaces_box ul, .enlaces_box li {
margin: 0px;
padding: 0px;
border: 0px;
font-size: 100%;
vertical-align: baseline;
}
.enlaces_box {
float: left;
width: 100%;
margin: 0px 0px -1px;
background: rgb(38, 43, 54);
}
.enlaces_box ul {
list-style: none;
}
.enlaces_box li, .enlaces_box ul {
margin: 0px;
list-style: none;
}
.enlaces_box ul.enlaces li.elemento {
width: 100%;
float: left;
padding: 8px 0px;
color: rgb(140, 140, 156);
border-bottom: 1px solid rgb(0, 0, 0);
font-size: 13px;
}
.enlaces_box ul.enlaces li.headers {
color: rgb(255, 255, 255);
font-size: 12px;
background: rgb(30, 34, 43);
padding: 10px 0px;
border-bottom: 0px;
margin-bottom: 9px;
font-family: sans-serif;
font-weight: 600;
border-radius: 3px;
}
.enlaces_box ul.enlaces li.elemento:last-child {
border-bottom: 0px;
}
.enlaces_box ul.enlaces li.elemento span {
width: 25%;
float: left;
padding: 5px 2%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.enlaces_box ul.enlaces li.elemento span.a select {
width: 100%;
text-align: center;
text-align-last: center;
}
.enlaces_box {
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.enlaces_box ul.enlaces li.elemento span.b i.fab {
font-size: 24px;
margin-right: 8px;
margin-top: 2px;
}
#mensaje-fuentes {
text-align: center;
}
#link-fuente {
text-align: center;
}
.fas fa-caret-down::before {
content: "\f0d7";
}
.enlaces_box a {
text-decoration: none;
transition: all 0.1s ease-in-out 0s;
color: rgb(122, 136, 157);
}
.enlaces_box ul.enlaces li.elemento a {
color: rgb(150, 157, 174);
}
.fas fa-download::before {
content: "\f019";
}
.enlaces_box ul.enlaces li.elemento span b {
font-size: 25px;
color: rgb(89, 138, 245);
}
.enlaces_box ul.enlaces li.elemento .a img {
width: 31px;
display: block;
margin: auto;
}
fieldset.fieldbox {
display: block;
margin-left: 3px;
padding-top: 2px;
text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
border-top: 4px solid #464646;
border-bottom: 4px solid #464646;
border-left: 4px solid #464646;
border-right: 4px solid #464646;
border-radius: 5px;
}
div.datos-tecnicos-box, .datos-tecnicos-box span, .datos-tecnicos-box a, .datos-tecnicos-box img, .datos-tecnicos-box b, .datos-tecnicos-box i, .datos-tecnicos-box ul, .datos-tecnicos-box li {
margin: 0px;
padding: 0px;
border: 0px;
font-size: 100%;
vertical-align: baseline;
}
.datos-tecnicos-box {
float: left;
width: 100%;
margin: 0px 0px -1px;
background: rgb(38, 43, 54);
}
.datos-tecnicos-box ul {
list-style: none;
}
.datos-tecnicos-box li, .datos-tecnicos-box ul {
margin: 0px;
list-style: none;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento {
width: 100%;
float: left;
padding: 8px 0px;
color: rgb(140, 140, 156);
border-bottom: 1px solid rgb(0, 0, 0);
font-size: 13px;
}
.datos-tecnicos-box ul.datos-tecnicos li.headers {
color: rgb(255, 255, 255);
font-size: 12px;
background: rgb(30, 34, 43);
padding: 10px 0px;
border-bottom: 0px;
margin-bottom: 9px;
font-family: sans-serif;
font-weight: 600;
border-radius: 3px;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento:last-child {
border-bottom: 0px;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento span {
float: left;
padding: 5px 2%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento span.a {
width: 20%;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento span.b {
width: 26.5%;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento span.c {
width: 14%;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento span.d {
width: 20.5%;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento span.e {
width: 19%;
}
.datos-tecnicos-box {
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento span.a i.fab {
font-size: 24px;
margin-right: 8px;
margin-top: 2px;
}
.datos-tecnicos-box a {
text-decoration: none;
transition: all 0.1s ease-in-out 0s;
color: rgb(122, 136, 157);
}
.datos-tecnicos-box ul.datos-tecnicos li.elemento a {
color: rgb(150, 157, 174);
}
.fas fa-download::before {
content: "\f019";
}
<fieldset id="descarga" class="fieldbox">
<div class="loading overlay"></div>
<div class="enlaces_box">
<ul class="enlaces">
<li class="elemento headers">
<span class="a">SERVIDOR <i class="fas fa-caret-down"></i></span><span class="b">SO <i class="fas fa-caret-down"></i></span><span class="c">FORMATO <i class="fas fa-caret-down"></i></span>
</li>
<li id="li1" class="elemento">
<span class="a"><select id="iv1" class="select_host"><option value ="">Elija Servidor</option><option value="ClickNUpload.co">ClickNUpload.co</option></select></span><span class="b"><i class="fab fa-windows"></i> 32 Bits</span><span class="c">Instalable</span>
</li>
</ul>
</div>
</fieldset>
Lo que deseo es que se sobreponga el loader, cuando yo aplique el código CSS con las reglas que lo ubican centrado, encima del DIV con la clase "enlaces_box" (con Javascript yo lo agrego o lo retiro a mi gusto, ya que el loader no va a aparecer siempre). Como pueden ver actualmente me vi obligado a usar un DIV con las clases "loading" y "overlay", quiero prescindir de él para tener el código "mas limpio", en su lugar reutilizar el DIV "enlaces_box" que ya tengo (además quiero que el loader se centre en el contenido de este DIV), además el efecto de opacidad y la imagen "centrada" se aplique solamente al DIV con la clase "overlay" (no a todo el body de la página como se observa en el Snippet).