feste Position Div innerhalb div Container

Question

Ich versuche, feste Position div innerhalb relativ Container zu erstellen. Ich benutze Bootstrap CSS-Framework. Ich versuche einen Wagen mit fester Position zu erstellen. Also, wann immer Benutzer Scroll-Seite wird es Warenkorb Inhalte zeigen. Aber jetzt ist das Problem, es lief außerhalb dieses Containers div.

Dies muss im reaktionsfähigen Modus arbeiten.

Hier ist mein Versuch:

<div class="wrapper"> 
    <div class="container"> 
     <div class="element"> 
      fixed 
     </div> 
    </div> 
</div> 

CSS-Code:

.wrapper { 
    width:100% 
} 
.container { 
    width:300px; 
    margin:0 auto; 
    height:500px; 
    background:#ccc; 
} 
.element { 
    background:#f2f2f2; 
    position:fixed; 
    width:50px; 
    height:70px; 
    top:50px; 
    right:0px; 
    border:1px solid #d6d6d6; 
} 

See live example here.

Answer 1

Screenshot:

Dies ist, wie position: fixed; verhält:

MDN link

keinen Platz für das Element verlassen Sie. Positionieren Sie es stattdessen an einer angegebenen Position relativ zum Ansichtsfenster des Bildschirms und verschieben Sie es beim Scrollen nicht . Beim Drucken, positionieren Sie es an dieser festen Position auf jeder Seite.

Daher zu bekommen, was Sie wollen Sie etwas mehr als feste Positionierung verwenden:

Wahrscheinlich dies: demo

.wrapper { 
    width:100% 
} 
.container { 
    width:300px; 
    margin:0 auto; 
    height:500px; 
    background:#ccc; 
} 
.element { 
    background:#f2f2f2; 
    position:fixed; 
    width:50px; 
    height:70px; 
    margin-left:250px; 
    border:0px solid #d6d6d6; 
} 

Answer 2

können Sie fügen Sie einfach

.element { 
    left:368px; 
} 

Fiddle : http://jsfiddle.net/UUgG4/

Answer 3

Wenn Sie möchten, dass der Einkaufswagen angezeigt wird, selbst wenn der Benutzer scrollt, dann sollten Sie position:fixed für den Einkaufswagen verwenden (wenn .container Ihr Einkaufswagen ist), da er in Bezug auf Bildschirm/Ansichtsfenster angezeigt werden soll. Ihr aktueller Code zeigt nur den element an, der absolut innerhalb des container positioniert ist.Wenn Sie es so sein wollen, dann geben:

.container { 
position:relative; 
} 

.element { 
position:absolute; 
top:50px; 
right:0px; 
} 

Answer 4

Nein, es ist unmöglich, weil feste Eigenschaft das Element aus dem Fluss wirft, damit es nicht auf dem Dokument alles abhängt und ja, es ist nicht mehr enthalten in Ihre Behälter:)

Answer 5

fand ich die Antwort auf diese Frage:

<div class="container"> 
     <div class="inContainer"> 
      <p> coucou </p> 
     </div> 

     <div> 
      <p> other thing</p> 
     </div> 
</div> 

Sie diese Klasse wollen = inContainer in class = Container in einer festen Position sind, aber wenn Sie mit dem Navigator blättern blättern Sie dies nicht tun möchte, dass die Klasse = i nContainer Bewegung außerhalb der Klasse = Container

So können Sie etwas wie das

.container{ 
    height: 500px; 
    width: 500px; 
    overflow-y:scroll; 
} 

.inContainer { 
    position: absolute; 
} 

machen So class = inContainer auf der Oberseite immer sein wird, von Ihnen class = Container sind und bewegen sich mit du bist class = Container, wenn Sie mit Navigator Scroll scrollen =)

(getestet nur mit Chrom)

Answer 6

Ja, Sie können es tun, verwenden Sie einfach margin-top Eigenschaft statt top Eigenschaft.

Wenn Sie Position verwenden: feste und eine obere und eine oder linken Position angeben, Sie werden feststellen, dass das Element relativ zu dem Fenster befestigt werden, und keinem anderen Element der position: relative.

Es gibt einen Weg um dies und das ist nicht zu oberen und linken Positionen, sondern stattdessen zu margin-left und margin-top auf der Position: fixed Element.

Quelle: https://www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/

Answer 7

<div style="position: fixed;bottom: 0;width: 100%;"><div class="container" style="position: relative;"><div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">F</div></div></div> 

Answer 8

der übergeordneten Container position: relative

Statt top oder left haben das Make-Element Verwendung mit margin-top und/oder margin-left

Wenn Sie nur top verwenden das wird Positioniere das Element basierend auf dem Fenster, aber wenn duverwendest, die basierend auf dem übergeordneten Element positioniert wird. Das Gleiche gilt für left oder right

<div class="parent"> 
    <div class="child"></div> 
</div> 

.parent { 
    position: relative; 
} 
.child { 
    position: fixed; 
    margin-top: 30px; 
    margin-left: 30px; 
}