Θέση CSS (CSS-P) στο DHTML

Το CSS χρησιμοποιείται για να προσθέσει στυλ στα στοιχεία HTML.

Παράδειγμα

Σημείωση:Οι περισσότερες περιπτώσεις DHTML απαιτούν IE 4.0+、Netscape 7+ ή Opera 7+!

position:relative
Πώς να τοποθετήσετε το στοιχείο σε σχέση με την κανονική του θέση.
position:relative
Πώς να τοποθετήσετε όλα τα τίτλοι σε σχέση με την κανονική τους θέση.
position:absolute
Πώς να ορίσετε μια στοιχείο χρησιμοποιώντας έναν αριθμητικό όρισμα.

Μπορείτε να βρείτε περισσότερα παραδείγματα στο κάτω μέρος της σελίδας.

Ποιες ιδιότητες μπορούν να χρησιμοποιηθούν με το CSS-P;

Πρώτα, το στοιχείο πρέπει να καθοριστεί η ιδιότητα 'position' (relative ή absolute).

Στη συνέχεια, μπορώ να ρυθμίσω τις παρακάτω ιδιότητες CSS-P:

  • left - αριστερή θέση του στοιχείου
  • top - τοπική θέση του στοιχείου
  • visibility - καθορισμός αν το στοιχείο θα είναι ορατό ή κρυμμένο
  • z-index - σειρά τοποθεσίας των στοιχείων
  • clip - κοπή στοιχείων
  • overflow - πώς να χειριστείτε το περιεχόμενο που υπερβαίνει

Position

Η ιδιότητα 'position' του CSS επιτρέπει τη ρύθμιση της τοποθεσίας ενός στοιχείου στο έγγραφο.

position:relative

Η ιδιότητα 'position:relative' τοποθετεί το στοιχείο με βάση την κανονική του θέση.

Το παρακάτω παράδειγμα τοποθετεί το στοιχείο 'div' στην θέση που βρίσκεται το δεξί του κανονικής του θέσης, 10 εικονοστοιχεία προς τα δεξιά.

div
{
position:relative;
left:10;
}

position:absolute

Η ιδιότητα 'position:absolute' τοποθετεί έναν στοιχείο με βάση το περιθώριο του παραθύρου.

Το παρακάτω παράδειγμα τοποθετεί το στοιχείο 'div' στην θέση που βρίσκεται το δεξί της περιθώριο του περιέκτη του, 10 εικονοστοιχεία προς τα δεξιά.

div
{
position:absolute;
left:10;
}

Ορατότητα

Η ιδιότητα 'visibility' καθορίζει αν ένα στοιχείο είναι ορατό ή όχι.

visibility:visible

Η ιδιότητα 'visibility: visible' καθιστά το στοιχείο ορατό.

h1
{
visibility:visible;
}

visibility:hidden

Η ιδιότητα 'visibility: hidden' καθιστά το στοιχείο μη ορατό.

h1
{
visibility:hidden;
}

Z-index

Η ιδιότητα 'z-index' χρησιμοποιείται για να τοποθετήσει έναν στοιχείο μετά από ένα άλλο. Η προεπιλεγμένη τιμή του 'z-index' είναι 0. Η τιμή είναι τόσο υψηλότερη, τόσο υψηλότερη είναι η προτεραιότητά του. Η τιμή 'z-index: -1' έχει χαμηλότερη προτεραιότητα.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

Στο παρακάτω παράδειγμα, αν τα h1 και h2 επικάλύπτονται ο ένας στον άλλον, το στοιχείο h2 θα βρίσκεται πάνω από το h1.

Φίλτρα

Η ιδιότητα 'filter' επιτρέπει τη προσθήκη επιπλέον στοιχείων στυλ σε κείμενο και εικόνες.

h1
{
width:100%;
filter:glow;
}

Σημείωση:Για να χρησιμοποιήσετε την ιδιότητα filter, πάντα καθορίστε το πλάτος του στοιχείου.

Το παρακάτω παράδειγμα παράγει την παρακάτω έξοδο:

Κεφαλίδα

διαφορετικές φιλτράσεις

Σημείωση:Εκτός αν η ιδιότητα background-color έχει οριστεί ως transparent, κάποιες ιδιότητες Filter δεν θα λειτουργήσουν!

όρισμα παράμετροι περιγραφή παράδειγμα
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 επιτρέπει τη ρύθμιση της διαφάνειας του στοιχείου 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 καταστήστε τα στοιχεία θολά 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color καταστήστε το καθορισμένο χρώμα διαφανές 
filter:chroma(
color=#ff0000)
fliph μηδέν αντιστροφή στοιχείων οριζόντια filter:fliph;
flipv μηδέν αντιστροφή στοιχείων κάθετα filter:flipv;
glow
  • color
  • strength
 καταστήστε τα στοιχεία να λάμπουν 
filter:glow(
color=#ff0000,
strength=5);
gray μηδέν θέτει στοιχεία σε μαύρο-μπλε filter:gray;
invert μηδέν θέτει στοιχεία με αναστροφή χρωμάτων και φωτεινότητας filter:invert;
mask color θέτει στοιχεία με καθορισμένο χρώμα υποβάθρου και διαφανές προσκήνιο 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 θέτει στοιχεία με σκιά 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 θέτει στοιχεία με σκιά 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 θέτει τα στοιχεία σε μορφή κυματισμού 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray μηδέν Εμφανίστε τα στοιχεία με μαύρο και λευκό χρώμα με τις τιμές του ανοιχτού και της έντασης. filter:xray;

Φόντο

Η ιδιότητα background σας επιτρέπει να επιλέξετε τη δική σας φόντο.

background-attachment:scroll

Η φόντο θα κινηθεί όταν η σελίδα θα κάνει κύλιση.

background-attachment:fixed

Η φόντο δεν θα κινηθεί όταν η σελίδα θα κάνει κύλιση.

Περισσότερα παραδείγματα

Ορατότητα
Πώς να κάνετε ένα στοιχείο μη ορατό. Θέλετε να εμφανίζεται αυτό το στοιχείο ή όχι;
Z-index
Το Z-index μπορεί να χρησιμοποιηθεί για να τοποθετήσετε ένα στοιχείο μετά από ένα άλλο στοιχείο, χρησιμοποιώντας τη σειρά του Z-index.
Z-index
Δείτε, η σειρά του Z-index του στοιχείου έχει αλλάξει.
Δακτυλιδία
Αλλάξτε τον τύπο του δακτυλιδίου του ποντικιού με το CSS.
Φίλτρα
Χρησιμοποιήστε την ιδιότητα filter για να αλλάξετε τον τύπο του τίτλου.
Φίλτρα στις εικόνες
Η ιδιότητα filter μπορεί επίσης να εφαρμοστεί στις εικόνες, εδώ είναι μερικά παραδείγματα εικόνων που έχουν εφαρμοστεί την ιδιότητα filter.
Εικόνα νερού
Η εικόνα φόντου δεν θα κινηθεί όταν η σελίδα θα κάνει κύλιση.