Wie wird das div direkt innerhalb des Containers angezeigt, wenn das Eltern-Div-Element fest ist und das Kind-Div-Element absolut ist?

Question

Ich benutze Bootstrap container. Ich habe ein Elternteil Div mit position: fixed und Kind div mit position: absolute. Ich setze beide Positionen right:0 so, dass mein div die rechte Seite anzeigt.

Jetzt ist das Problem, ich benutze Bootstrap-Container. Es wird die gesamte rechte Seite der Seitenleiste angezeigt. Ich meine, es überschreitet die Containergrenze. Ich kann den richtigen Wert einstellen, aber ich denke nicht, dass dies eine gute Idee ist.

Hinweis: Es ist kein Rahmen im Container vorhanden. Ich habe in der Farbe erstellt, um mein Problem zu erklären. Sieh dir das Snippet im Vollbild an. Der Kreis wird in der Nähe der Bildlaufleiste angezeigt. Ich brauche den Container.

Gibt es eine andere Möglichkeit, dies zu tun?

Ausgabe erhalten.

Sie können überprüfen, ob mein div die Grenze des Containers überschreitet.

Ich brauche Ausgabe

.google-container { 
 
    border-radius: 10px; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 

 
.google_1 { 
 
    position: absolute; 
 
    right: 0px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    display: flex; 
 
    background-color: #EFBD40; 
 
} 
 

 
.google-container .google_1 h2 { 
 
    margin: auto; 
 
    color: #fff; 
 
    font-size: 28px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="google-container"> 
 
    <div class="google_1"> 
 
     <h2>google</h2> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Try this:

$('.google_1').css({ 
    'right': $('.container').offset().left 
}); 

Diese 210

immer ausrichten google_1 Kästchen rechts neben der container Breite

Hinweis: Versuchen Sie, das unten Schnipsel im Vollbildmodus (Expand Snippet)

$('.google_1').css({ 
 
    'right': $('.container').offset().left 
 
});

.google-container { 
 
    border-radius: 10px; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 

 
.google_1 { 
 
    position: absolute; 
 
    right: 0px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    display: flex; 
 
    background-color: #EFBD40; 
 
} 
 

 
.google-container .google_1 h2 { 
 
    margin: auto; 
 
    color: #fff; 
 
    font-size: 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="google-container"> 
 
    <div class="google_1"> 
 
     <h2>google</h2> 
 
    </div> 
 
    </div> 
 
</div>