2010-01-27 16 views
6

Ich versuche Box im unteren rechten Rand der Seite zu beheben und bewegt sich nicht mit der Seite scrollt nach unten. Aber es funktioniert nicht für mich, weiß nicht warum. Hier ist mein Code:Wie mache ich eine feste div?

<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> 
+0

funktioniert gut mit mir. Auch wenn die Autowerte für oben und links nicht zwingend sind. Was ist das Problem? Welchen Browser benutzen Sie zum Testen? – gregseth

Antwort

7

Es funktioniert gut in FF und Chrome ..

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

Auch stellen Sie sicher, Sie haben einen Doctyp definiert ..

+1

Es funktionierte erst nach dem Hinzufügen des Doctype. Danke :) – taabouzeid

1

Huh, sollte funktionieren. Vielleicht entfernen Sie top: auto?

(Es wird nicht 6 obwohl in IE arbeiten, wie IE 6 nicht position: fixed unterstützt das.

2

scheint für mich zu arbeiten .... Ich glaube, ein in IE7 und größer müssen Sie definieren doctype, wenn nach „Quirks-Modus“, wenn Sie nicht wissen, wo auf das beginnen

ich glaube nicht IE6 Position unterstützt... Fest

+0

Sie sind richtig Sir, die absolute Positionierung funktioniert, wenn Sie einige Bytes speichern möchten. –

0

Ihre hTML/CSS nur in IE gebrochen ändern von position: fixed; bis position: absolute; und es sollte mehr funktionieren, als Sie es wünschen. "

können Sie auch den Doctype Element anwenden:

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

Ja, zwei Dinge zu kümmern

  • die DOCTYPE schreiben, aber die Übergangs-one!
  • Die CSS-Eigenschaft von "position: fixed" wird von IE6 nicht unterstützt ... also wäre es besser, "position: absolute" zu verwenden ... mit allen anderen Eigenschaften, die dieselbe beibehalten.
0

Dass alle Antworten haben "big-Codes" Warum fügen Sie gerade nicht "fest" zu div Element So:

div position: fixed; 

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

0
<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> 
0

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

http://learnlayout.com/position.html

Fixe

Ein festes Element relativ zu dem Bildfenster positioniert ist, die es bedeutet immer bleibt an der gleichen Stelle auch wenn die Seite gescrollt wird. Wie bei relativ werden die Eigenschaften top, right, bottom und left verwendet.

Ich bin sicher, dass Sie dieses feste Element in der unteren rechten Ecke der Seite bemerkt haben. Ich gebe dir die Erlaubnis, jetzt darauf zu achten.Hier ist die CSS, die es dort setzt:

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

relativ

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

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

absolute

absolute die trickiest Positionswert. absolute verhält sich wie festgelegt, außer relativ zum nächsten positionierten Vorfahren und nicht relativ zum Ansichtsfenster. Wenn ein absolut positioniertes Element keine positionierten Vorfahren hat, verwendet es den Dokumentkörper und bewegt sich immer noch mit dem Seitenscrollen. Denken Sie daran, ein "positioniertes" Element ist eines, dessen Position alles außer statisch ist.

Hier ist ein einfaches Beispiel:

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