DHTML CSS Positioning (CSS-P)

CSS ສຳລັບການໃສ່ບັນດາສັນຍານ HTML.

实例

ຄວາມຄິດ:大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！

position:relative
如何相对于元素的正常位置来定位这个元素。
position:relative
如何相对其正常位置来定位所有的标题。
position:absolute
如何使用一个绝对值来定义一个元素。

ທ່ານຈະສາມາດພົບຫຼາຍຄັນຄືນຫຼາຍກວ່າທີ່ຫຼັງບັນດາບັນຊີ.

ພວກເຂົາຈະສາມາດນໍາໃຊ້ສະຖານະການທີ່ພວກເຂົາຈະມີອີກຫຼືບໍ່?

ກໍາລັງຄັ້ງທຳອິດປະຕູວັດທະນະທຳຈະຕ້ອງມີສະຖານະການ 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: ສະຖານະການທີ່ສະແດງວ່າພວກເຂົາຈະຕິດຕັ້ງປະຕູວັດທະນະທຳອີງຈາກຂອງ margin ຂອງປ່ອງຫຼັງ.

ຄັນຄືນນີ້ຈະຕິດຕັ້ງ div ອາດຢູ່ຫຼັງຂອງຂອງເຂດ margin ຂອງບັນດາບັນຊີຂອງພວກເຂົາຫຼັງຈາກ 10 ຕີ.

div
{
position:absolute;
left:10;
}

Visibility

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.

Filters

ການໃຊ້ມາດຕະການ filter ອາດອະນຸຍາດໃຫ້ເຈົ້າສາມາດໃສ່ຮູບແບບຂອງຂໍ້ຄວາມແລະຮູບພາບຫຼາຍກວ່າເກົ່າ.

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

ຄວາມຄິດ:ຖ້າຈະນຳໃຊ້ filter, ຈະຕ້ອງການກະກຽມຂະໜາດສິ່ງມາກ່ອນ!

ຕົວຢ່າງທີ່ຂື້ນມາສະແດງຈະສະແດງອອກຕາມນີ້:

Header

ຜະສານທີ່ຫຼາຍທີ່ຈະນຳໃຊ້

ຄວາມຄິດ:ນອກຈາກທີ່ background-color ຜະສານຈະຖືກກະຈາຍຄວາມໂກດ, ບາງຜະສານ 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 none ສະແດງສິ່ງທີ່ປ້ອງກັນທຳມະດາທີ່ຖືກລະບຸ filter:fliph;
flipv none ສະແດງສິ່ງທີ່ປ້ອງກັນທຳມະດາທີ່ຕົວຢູ່ filter:flipv;
glow
  • color
  • strength
 ເຮັດໃຫ້ສິ່ງສະແດງສະຫຼາດ 
filter:glow(
color=#ff0000,
strength=5);
gray none ສະແດງສິ່ງທີ່ມີສີສີຂຽວ filter:gray;
invert none ສະແດງສິ່ງມີສີແລະຄວາມສະຫຼາດທີ່ສະເປັນປະລິດ 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 none Display elements with reversed color and brightness values in black and white. filter:xray;

Background

The background property allows you to choose your own background.

background-attachment:scroll

The background scrolls with the page.

background-attachment:fixed

The background does not scroll with the page.

More Examples

Visibility
How to make an element invisible. Do you want this element to be displayed or not?
Z-index
Z-index can be used to place an element after another element, using the Z-index order.
Z-index
Please see, the Z-index order of the element has changed.
Cursors
Change the cursor style with CSS.
Filters
Use the filter property to change the style of the title.
Filters on Images
The filter property can also be applied to images, here are some images that have applied the filter property.
Watermark
Background image that does not move when the page scrolls.