Verhindern, dass fixierte Elemente überlappende Bildlaufleisten enthalten

Question

Ich habe eine Website, auf der ich versuche, die Registerkarte "Kontakt" in der unteren rechten Ecke hinzuzufügen. Here is a fiddle von meinem Mock-up. Die rosafarbene Kontaktlasche befindet sich über der Bildlaufleiste. Ich möchte, dass es nur auf der linken Seite der Bildlaufleiste ist.

Ich benutze position:fixed, um die Registerkarte in der unteren rechten, aber es überlappt die Bildlaufleiste. Ich könnte die right:0 zu etwas anderem ändern, aber mein Verständnis ist, dass die Breite der Bildlaufleisten in verschiedenen Browsern variiert, so dass ich nicht weiß, welchen Wert zu wählen.

Ich habe gegoogelt und so viele verwirrende und verworrene Antworten gefunden, aber keiner scheint tatsächlich zu adressieren, was ich versuche zu lösen.

Wie kann ich ein zu fixierendes Element positionieren und die Bildlaufleiste nicht überlappen?

Answer 1

Wenn Sie die Bildlaufleiste unter der Registerkarte möchten, können Sie verwenden:

z-index : 'number value'; 

Hier ist eine aktualisierte Version Ihrer Geige: Fiddle

Ist das, was Sie suchen? Oder versuchen Sie, das Element vollständig von der Bildlaufleiste weg zu bewegen, sodass es von der Seite der Seite schwebt? Oder reagiert auf die Bildlaufleiste "lebendig werden"? Es wäre einfacher, eine Designänderung auf der linken Seite vorzunehmen, als mit den Nuancen der dynamischen Größen der Bildlaufleiste umzugehen, wie es @chazsolo erwähnt.

Answer 2

können Sie die Bildlaufleiste verstecken mit:

 

    ::-webkit-scrollbar { 
    display: none; 
    } 

Auf diese Weise Menschen bewegen kann immer noch, aber das ist noch nicht sehr benutzerfreundlich und funktioniert nur auf Webkit-Browsern. Ich denke, was Sie anstreben, ist ein wenig verlorener Kampf; Ich würde es bündig gegen den Boden legen und ihm den gleichen rechten Rand wie den Rest des Inhalts auf der Seite geben, dann müssen Sie sich nicht damit herumschlagen und es würde immer noch gut aussehen.

Browser wie Safari verstecken vollständig die Bildlaufleiste, wenn Sie aktiv Scrollen sind, so, wenn Sie es für jeden Browser einstellen wollen ... ja nein danke :)

Answer 3

Während ich in den Kommentaren darüber erwähnt ich würde wieder denken Ihre Seitenstruktur vorschlagen, glaube ich, die „schnelle Lösung“ Sie sind nach its:

1. entfernen position: absolute; von #workspace

2. ändern.210-margin-top: 30px; auf #workspace

3.e Geben Sie Ihr #content-header ein z-index höher als den Rest (2 zum Beispiel)

#content-header { 
    ... 
    z-index: 2; 
} 

#workspace { 
    //top: 30px;   -- REMOVE THIS 
    //position: absolute; -- REMOVE THIS 
    margin-top: 30px; 
} 

JSFiddle