Superposition qui ne couvre que la div parent

J'ai un groupe de contrôles à l'intérieur d'un div (listbox et les boutons ci-dessous), et je tiens à les recouvrir d'une semi-transparent overlay (avec un centré sur l'indicateur de chargement).

Div Parent de taille et de position ne sont pas fixes.

Voici un exemple: http://jsfiddle.net/n4fbp8ex/
- Zone d'intérêt est à l'intérieur de bordure rouge. J'aimerais qu'il soit couvert par une superposition.
- "Chargement..." div est mon superposition. Il doit couvrir tout le div parent (mais rien d'autre), et le texte doit être centré verticalement et horizontalement

Comment puis-je corriger mon "centeredOverlay" style?

html:

<div class="halfColumn">
    some content
    <br/>
    <input />
</div>
<div class="halfColumn">
    bla bla
    <br/>
    lorem ipsum
    <div style="border-style:solid; border-width: 1px; border-color: red;">
        <div class="centeredOverlay">Loading...</div>
        <select size=2 style="width:100%; height:50vh">
        </select>
        <button>Click me</button>
        <button>Click me too</button>

    </div>
</div>
<div style="clear:both"></div>
</div>

css:

.centeredOverlay {
  position: absolute;
  background-color: rgba(0,0,0,0.3); /*dim the background*/
}

.halfColumn {
    float: left;
    width: 50%;
}

.halfColumn2 {
    float: right;
    width: 50%;
}
De cette façon? - jsfiddle.net/n4fbp8ex/2. Vous devez positionner le texte (un élément).
Pas tout à fait. La superposition ne devrait pas couvrir quelque chose à l'extérieur de la bordure rouge (texte en haut à droite dans ce cas).
Oh...comme c' - jsfiddle.net/n4fbp8ex/6

OriginalL'auteur Pavel Tupitsyn | 2014-08-20

  1. 9

    Je pense que c'est ce que vous cherchez..même si le texte n'a pas encore été placé.

    JSfiddle

    EDIT - JSfiddle avec nouvel élément span pour centrer le texte

    HTML

    <div class="main">
    <div class="halfColumn">some content
        <br/>
        <input />
    </div>
    <div class="halfColumn">bla bla
        <br/>lorem ipsum
        <div class="wrapper">
            <div class="centeredOverlay">Loading...</div>
            <select size=2 style="width:100%; height:50vh"></select>
            <button>Click me</button>
            <button>Click me too</button>
        </div>
    </div>
    <div style="clear:both"></div>
</div>

    CSS

    .centeredOverlay {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.3);
    /*dim the background*/
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:black;
    text-align: center;
}
.halfColumn {
    float: left;
    width: 50%;
}
.wrapper {
    position: relative;
    border-style:solid;
    border-width: 1px;
    border-color: red;
}
.halfColumn2 {
    float: right;
    width: 50%;

    }

    Avec "chargement" texte centré - jsfiddle.net/n4fbp8ex/9
    Merci, ça marche. Dirait que j'ai raté la div parent doit avoir parent (non statique).

    OriginalL'auteur Paulie_D

  2. 4

    Est-ce que vous cherchez?

    .overlayContainer{
    position:relative;

}

.overlay {
  position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.3;
    background:#b3b3b3;
    text-align:center;
}

    http://jsfiddle.net/n4fbp8ex/4/

    OriginalL'auteur Frisbetarian