Wie eine feste div machen?

StackOverflow https://stackoverflow.com/questions/2151048

  •  23-09-2019
  •  | 
  •  

Frage

Ich versuche Box zu machen in der unteren rechten Rand der Seite befestigt werden und mit den Seiten scrollt nicht nach unten bewegen. Aber es funktioniert nicht für mich Keine Ahnung, warum. Hier ist mein Code: 

<html>
 <head>

 <style type="text/css">

.tooltip {
 width: 200px;
 position: fixed;
 top:auto;
 bottom:0px;
 right:0px;
 left:auto;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>
War es hilfreich?

Lösung

Es funktioniert gut in FF und Chrome ..

ältere Versionen von IE unterstützt nicht position:fixed richtig .. nicht sicher neueste Version ..

Auch stellen Sie sicher, haben Sie eine Doctype definiert ..

Andere Tipps

Es scheint, für mich zu arbeiten .... Ich glaube, in IE7 und größer werden Sie brauchen eine Doctype zu definieren, wenn nach „Quirks-Modus“, wenn Sie nicht wissen, wo auf das starten.

Ich glaube nicht IE6 unterstützt Position. Fest

Huh soll, arbeiten. Vielleicht top: auto entfernen?

(Es wird nicht Arbeit in IE 6 aber, wie IE 6 nicht position: fixed unterstützen.

Ihre HTML / CSS ist nur in IE gebrochen. Wechsel von position: fixed; zu position: absolute; und es sollte mehr arbeiten, wie Sie es wollen.

Sie können auch das Doctype Element anwenden: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ja, zwei Dinge zu kümmern

  • Schreiben Sie die DOCTYPE aber die Übergangs-one!
  • die CSS-Eigenschaft „position: fixed“ wird von IE6 unterstützt ..., so dass Sie besser wäre dran mit „position: absolut“. ... mit allen anderen Eigenschaften zu halten gleiche

Dass alle Antworten haben "big-Codes" Warum gerade Sie nicht add „fixiert“ zu div Element Wie folgt aus: 

div position: fixed;

Und das "s es: D Hoffe, dass es für Sie arbeitet 

<html>
 <head>
 <style type="text/css">
.header {
 width: 100%;
 height:100px;
 position: fixed;
 top:0px;
 left:0px;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>

jede Position bezogenes Problem dann sehen Sie diesen Link Sie schnelle Lösungen erhalten haben.

http://learnlayout.com/position.html

Fixed

Ein festes Element ist relativ positioniert, um das Bildfenster, das heißt, es bleibt immer an der gleichen Stelle, auch wenn die Seite gescrollt wird. Wie bei Verwandten, die oben, rechts, unten und links Eigenschaften verwendet.

Ich bin sicher, Sie haben bemerkt, dass festes Element in der unteren rechten Ecke der Seite. Ich gebe Ihnen die Erlaubnis, jetzt, um es zu achten. Hier ist die CSS dass puts es dort: 

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

relativ

relativ verhält sich gleich wie statisch, wenn Sie fügen Sie einige zusätzliche Eigenschaften. 

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

absolute

absolute ist der heikelste Positionswert. statt der relativ zu dem Darstellungsfeld absolute benimmt sich wie außer in Bezug auf den nächsten positioniert Vorfahr fixiert. Wenn ein absolut positionierten Element keine Vorfahren positioniert hat, verwendet er das Dokument Körper, und nach wie vor bewegt sich zusammen mit Seite Scrollen. Denken Sie daran, ein „positioniert“ Element ist, dessen Position nichts außer statisch.

Hier ist ein einfaches Beispiel: 

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

So etwas sollte funktionieren 

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>

.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top