Fixed-Element relativ zum Viewport (links) und statisches Element (rechts)

Question

Wahrscheinlich ist das unmöglich, aber ich musste versuchen: Stellen wir uns ein Element im Viewport fest.

Position: fixed; 
Top: 30px; 
Left: 0px; 

Aber die rechte Seite relativ zu einem bestimmten Element auf der Seite (Container) mit position: static und floatet nicht in dem festen Element. Es ist außerhalb, unabhängig, statisch irgendwo auf der Seite:

Ich bin mir bewusst, dass, wenn ich die richtige Position des festen Elements in der Regel wird relativ zur rechten Seite des Ansichtsfensters gesetzt werden.

So, in diesem Fall, wenn die Größe des Browsers ändern die rechte Seite des festen Elements wäre nicht relativ zur rechten Seite des Viewports, sondern auf der rechten Seite des Containers.

Vielleicht etwas javaScript? jQuery?

Answer 1

Vorausgesetzt, Sie wissen vorher, wo die rechte Kante des "Containers" liegt (basierend auf seiner Breite/linken Versatz), können Sie das gewünschte Layout in den meisten modernen Browsern mit dem CSS3 calc() function erreichen. In Pseudo-Code, Ihre Formel für right würde in etwa so aussehen:

right: calc(100% - container_width - container_left_offset); 

Hier ist eine Arbeits Demo des Code:

body, 
 
html { 
 
    margin: 0; 
 
} 
 
#fixed { 
 
    background: #CCC; 
 
    height: 30px; 
 
    left: 0; 
 
    position: fixed; 
 
    right: calc(100% - 100px - 300px); 
 
    top: 30px; 
 
} 
 
#static { 
 
    background: #999; 
 
    height: 800px; 
 
    margin-left: 300px; 
 
    width: 100px; 
 
}

<div id="fixed"> 
 
    Fixed 
 
</div> 
 
<div id="static"> 
 
    Container 
 
</div>

Wenn jedoch die rechte Randposition des Behälters Kann man vorher nicht wissen (zB Dynamische Breite/variabler Inhalt), muss man wahrscheinlich eine JavaScript-Route nehmen. Hoffe das hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.

Answer 2

Wenn ich das richtig verstanden, was Sie wamt so etwas wie dies

ist, das war reine CSS erreicht verwendet, wird die CSS-Datei (im Beispiel) style.css genannt, und das ist ihr Inhalt

h1 {color: red}

.fixed-div{ 
    position: fixed; 
    top:20px; 
    left:50px; 
    width: 80%; 
    height: 2em; 
    border: 2px #789875 dotted 
} 

.f_container{ 
    position: relative; 
    float: right; 
    margin:-20px 0 0 0; 
    height: 80vh; 
    background-color: #778854; 
    border: 1px #946427 solid 
} 

.floating_text{float:left;} 

wie Sie seine sehr einfach sehen, die Fest div class Regelt das Verhalten der festen div (kein Kitzel hier) Ich denke, das CSS benötigt keine weitere Erklärung, aber wenn Sie es brauchen, werde ich es gerne zur Verfügung stellen.

der schwimmende Container durch die f_container Klasse gestylt wird

, wie Sie diese Klasse (mit dem festen div) relativ zu sehen ist und an seiner rechten Seite schwebt, auf diese Weise, wenn das Ansichtsfenster ir die Herstellung der Größe verändert Die Änderung der festen div-Breite (da ihre Breite% der Größe des Darstellungsbereichs ist) passt sich immer an die Änderung an.

Ihre Frage hat nicht angegeben, ob die schwebende Div-Höhe mit dem Viewport zusammenhängt, aber da es das interessanteste Szenario ist (wenn es behoben wurde, können Sie es einfach setzen), das ist die hier behandelte; wie Sie sehen können, enthält die CSS-Klasse:

height: 80vh; 

vh eine Darstellungseinheit ist, die ein 1/100stel der Ansichtsfenster Höhe repräsentiert

so, könnten Sie

80vh=80% of the viewports height 

Hoffe, dass ich sagen verstanden Ihre Frage und diese Antwort hilfreich

edit: vergessen Sie die hTML

hinzufügen