Positionierung Eigenschaften von Cascading Style Sheets (CSS)
Die Positionierung Attribute von CSS sind in erster Linie auf Stil Schichten mit dem Tag verwendet, obwohl man sie auch verwenden, um die Position eines Bildes, Behälter oder Block-Element innerhalb des Browsers, um Stil. Für Schichten, sowohl der Inhalt als auch der Behälter mit Attributen in dieser Kategorie gestylt werden.
PositionLegt fest, wie ein Stil-Element in einem Browser-Fenster sollte positioniert werden. Bestimmen Sie, ob die Position ist, Absolute, fest, relativ, oder statisch.
#footer {position: Relativ-}Wenn die Position festlegen, verwenden Sie eine der folgenden Stilwerte:
Absolute: Setzt die Position auf den numerischen Werten absolut das Element für das Element der Platzierung relativ zur oberen linken Rand des Browser-Fensters, oder an die nächstgelegene absolut oder relativ positioniert Elternelement eingegeben basiert.
fest: Setzt die Position auf den numerischen Werten absolut das Element für das Element der Platzierung relativ zur oberen linken Rand des Browserfensters eingegeben basiert.
relativ: Legt die Position des Elements durch die numerischen Werte für die Objektplatzierung in Bezug auf die gestylten Position der Elemente in der Datei Textfluss eingetragen.
statischSetzt das Element in einer genauen Position innerhalb des Textflusses.
BreiteVerwenden Sie dieses Attribut die Breite eines Elements zu setzen, wie eine Schicht oder einen anderen Behälter, unter Verwendung von: px, pt, im, cm, Millimeter, pc, em, Ex, %, oder Auto.
# Layer1 {width: 760px;}HöheVerwenden Sie dieses Attribut die Höhe eines Elements zu setzen, wie eine Schicht, unter Verwendung von: px, pt, im, cm, Millimeter, pc, em, Ex, %, oder Auto.
# Layer1 {height: 100px;}Sichtweite: Dieses Attribut bestimmt den Anfangs Sichtbarkeit Wert eines Elements, die eingestellt werden können versteckt, erben, oder sichtbar, wenn die Seite geöffnet wird zunächst in einem Browser-Fenster.
# Layer1 {Sichtbarkeit: Verborgen}Sichtbarkeit sollte nicht mit dem verwechselt werden anzeigen Attribut, das anzeigt, ob ein Element bestimmt, sollte als ein Block oder ein Inline-Element behandelt werden oder vollständig mit dem vom Browser ignoriert display: none; Attribut. Mit Sicht, sind Sie mit dem ursprünglichen Sichtbarkeitsstatus eines Elements, wie zum Beispiel eine Schicht zu tun, wenn die Seite geladen wird im Browser.
Dieses Attribut kann auch ein- und ausschalten Elemente mit javascript ein- und ausgeschaltet werden, um das Verstecken und auf der Seite, wodurch ein bisschen Interaktivität auf die Seite für den Besucher die Kreditvergabe.
Um die Sichtbarkeit Ihres Elements ändern, fügen Sie die Sichtbarkeit Eigenschaft zu Ihrem CSS-Selektor mit einem der folgenden Werte:
versteckt: Diese Option verbirgt sich eine Schicht von der Anzeige, wenn eine Seite zunächst in einem Browser geöffnet wird.
erben: Mit dieser Option jede Schicht bewirkt, dass die Sichtbarkeit eines Elternteils Schicht-, wenn ein Elternteil nicht vorhanden ist, die Schicht wird sichtbar zu erben. Wenn die Sichtbarkeit nicht spezifiziert ist, erben Attribut ist die Standardeinstellung.
sichtbarWählen Sie diese Option, um die Schicht zu zwingen, sichtbar zu sein, unabhängig von Sichtbarkeit Einstellung der übergeordneten Ebene, wenn die Seite zum ersten Mal in einem Browser-Fenster öffnet.
z-index: Dieses Attribut gibt eine auf der Seite zu anderen Schichten Stapelreihenfolge Verwandten Schicht, wie sie in einem Browser angezeigt werden.
Stellen Sie den z-Index Auto wenn die Zahl unkritischen ist, setzen Sie ihn auf erben zu machen, erben die Schicht eine z-index Wert des übergeordneten Ebene oder geben Sie eine bestimmte positive oder negative Zahl, wie 1, 15 oder 100, wenn die Anzahl wichtiger relativ zu den anderen Schichten auf der Seite ist.
Je höher die Zahl, desto näher wird die Schicht nach vorne oder oben auf der Seite am nächsten an der Besucher- die Zahl, desto niedriger ist, je näher die Schicht erscheint dem Hintergrund des Browsers.
#lastchance {z-index: 4-}Die Abbildung zeigt ein Beispiel aus mehreren Schichten auf einer Seite mit unterschiedlichen z-index Werte.
Überlauf: Kann die Überlauf-Einstellung verwendet werden, um festzulegen, was innerhalb einer Schicht zu allen Inhalten geschieht, die die Größe der Schicht überschreiten, die in den CSS definiert. Zum Beispiel, wenn eine Schicht 200px von 200px in der Größe, sondern enthält eine ganze Textseite bestimmt die Überlauf-Einstellung, wie der Text der Schicht füllt. Stellen Sie den Überlauf zuschreiben Auto, versteckt, scrollen, oder sichtbar.
#aboutus {overflow: scroll-}Hier ist eine Beschreibung von jedem der Überlaufwerte, die Sie verwenden können:
AutoWählen Sie diese Option, um den Browser zu haben automatisch Bildlaufleisten zur Schicht hinzufügen, wenn und nur wenn der Inhalt die Ebenen definierten Breite und Höhe nicht überschreiten:.
versteckt: Wenn diese Option aktiviert ist, wird die Größe einer Ebene gehalten und alle Inhalte, die Größe von mehr als abgeschnitten oder aus der Sicht in einem Browser-Fenster abgeschnitten.
scrollen: wählen Sie scrollen Bildlaufleisten an der Schicht, unabhängig davon hinzufügen, ob der Inhalt passt oder die Breite der Schicht übersteigt und Höhe. Dieses Attribut wird nicht einheitlich von allen Browsern unterstützt, so sicher sein, um es zu testen vor der Veröffentlichung.
sichtbarWählen Sie diese Option, die Schicht zu haben, erweitern vertikal und dann horizontal, falls erforderlich, passen alle Inhalte, die die angegebene Schicht Breite und Höhe nicht überschreiten, so dass alle Inhalte sichtbar sind.
Placement (links, oben, Recht, Boden): Die Platzierung Attribut können Sie die genaue Größe und Lage (basierend auf den angegebenen Typ) eines gestylten Element in einem Browser-Fenster angeben.
Standardmäßig ist die Pixelgröße und die Platzierung eines Elements sind für die oben angegebenen, links, unten, rechts und Kanten. Sie können jedoch andere Geräte verwenden (einschließlich pt, im, cm, Millimeter, pc, em, Ex, oder %), Falls gewünscht oder den Wert für eine der Seiten auf Auto. Für Schichten, wenn der Inhalt innerhalb dieser Schicht die angegebene Größe überschreiten, dehnt sich die Schicht um den Inhalt zu passen.
#specialitems {left: 500px; top: 300px; rechts: 0-bottom: 0-}KlammerVerwenden Sie dieses Attribut auf einen kleineren sichtbaren rechteckigen Bereich innerhalb einer Schicht relativ angeben, dass die Schicht der oberen linken Rand. Wenn geschnitten, kann die versteckten Bereich mit javascript oder andere Programmierung Spezialeffekte zu erzeugen manipuliert werden, die verstecken kann und die versteckten Inhalte zeigen.
Stellen Sie die Werte für die geschorene Fläche nach oben, links, rechts, und der untere Rand der Schicht durch die Verwendung px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (In Prozent), oder ein Wert von Auto.
#bunnygame {clip: rect (10px, 100px, 0px, 60px) -}