DHTML CSS Konumlandırma (CSS-P)

CSS, HTML öğelerine stil eklemek için kullanılır.

Örnek

Yorum:Çoğu DHTML örneği IE 4.0+、Netscape 7+ veya Opera 7+ gerektirir!

position:relative
Bu elementin nasıl normal konumuna göre konumlandırılacağını öğrenebilirsiniz.
position:relative
Tüm başlıkların nasıl normal konumlarına göre konumlandırılacağını öğrenebilirsiniz.
position:absolute
Bir elementin nasıl absolute bir değeri ile tanımlanacağını öğrenebilirsiniz.

Daha fazla örnek, sayfanın altında bulunabilir.

CSS-P ile birlikte hangi özellikler kullanılabilir?

Öncelikle, bu elementin position özelliği (relative veya absolute) belirlenmelidir.

Ardından, aşağıdaki CSS-P özelliklerini ayarlayabilirim:

  • left - Elementin sol kenar konumu
  • top - Elementin üst kenar konumu
  • visibility - Elementin görünür veya gizli olmasını belirleme
  • z-index - Elementin katman sırası
  • clip - Element kesimi
  • overflow - Aşırı çıkaran içeriğin nasıl işleneceği

Position

CSS'nin position özelliği, belgedeki bir elementin konumunu kontrol etmenizi sağlar.

position:relative

position:relative özelliği, bu elementi bir elementin normal konumuna göre konumlandırmak için kullanılır.

Aşağıdaki örnek, bu div elementini normal konumunun sağında 10 piksel konumuna yerleştirir:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute özelliği, bir elementi pencerenin margin'ına göre konumlandırır.

Aşağıdaki örnek, bu div elementini içeren bloğun sol margin'ının sağında 10 piksel konumuna yerleştirir:

div
{
position:absolute;
left:10;
}

Görünürlük

visibility özelliği, bir elementin görünür olup olmadığını belirler.

visibility:visible

visibility:visible özelliği, bir elementin görünür olmasını sağlar.

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden özelliği, bir elementin görünmez olmasını sağlar.

h1
{
visibility:hidden;
}

Z-index

z-index özelliği, bir elementi diğer elementin ardından yerleştirmek için kullanılır. z-index'in varsayılan değeri 0'dır. Değer ne kadar yüksekse, o kadar yüksek bir önceliklidir. z-index: -1 daha düşük bir önceliktir.

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

Yukarıdaki örnekte, h1 ve h2 birbirine katlanırsa, h2 öğesi h1'nin üzerinde yer alır.

Filtreler

filter özelliği, metin ve görsellere ek daha fazla stil etkisi eklemenizi sağlar.

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

Yorum:filter özelliğini kullanmak icin, her zaman elemanın genisligini belirtmelisiniz.

uygun örnekte alttaki cikti olusur:

Baslik

farkli filtreler

Yorum:background-color özelliği saydam olarak ayarlanmamissa, bazi Filter özellikleri calismayabilir!

özellik parametre tanım örnek
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 elemanın 透明ligini ayarlamak icin izin verir 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 elemani bulanik hale getir 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color belirli bir rengi saydam hale getir 
filter:chroma(
color=#ff0000)
fliph none elemani yatay ters cek filter:fliph;
flipv none elemani dikey ters cek filter:flipv;
glow
  • color
  • strength
 elemani yansit 
filter:glow(
color=#ff0000,
strength=5);
gray none siyah ve beyazla goster filter:gray;
invert none elemani i̇sik ve Parlaklık değerlerini ters cekmis renklerle goster filter:invert;
mask color belirli bir arka plan rengi ve saydam ön plan rengi ile gosterilen要素i̇sleri goster 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 gölge ile gosterilen要素i̇sleri goster 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 gölge ile gosterilen要素i̇sleri goster 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 要素i̇sleri dalga halinde goster 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Revers ve parlaklık değerleri ile elementleri siyah beyaz olarak gösterin filter:xray;

Arka Plan

Background özelliği, kendi arka planınızı seçmenize olanak tanır.

background-attachment:scroll

Arka plan sayfa kayarken hareket eder.

background-attachment:fixed

Arka plan sayfa kayarken hareket etmez.

Daha Fazla Örnek

Görünürlük
Bir elemanın görünmez olmasını nasıl yapabilirim. Bu elemanın görünmesini mi istersiniz yoksa görünmez mi olmasını mı?
Z-index
Z-index, bir elemanı diğer bir elemanın arkasına yerleştirmek için kullanılabilir, Z-index sırasını kullanarak.
Z-index
Görünün, elemanın Z-index sırası değiştirildi.
İşaretçiler
CSS ile fare işaretçisi tarzını değiştirin.
Filtreler
Başlıkların tarzını değiştirmek için filter özelliğini kullanın.
Resimler üzerinde Filtreler
filter özelliği de resimlere uygulanabilir, burada filter özelliği uygulandığı bazı resim örnekleri bulunmaktadır.
Watermark
Sayfa kayarken hareket etmeyen arka plan resmi.