Penggunaan relatif kemahiran position_javascript-tutorial js-php.cn

Penggunaan relatif kemahiran position_javascript

WBOY

Lepaskan： 2016-05-16 15:25:51

asal

1990 orang telah melayarinya

Relatif ialah sifat kedudukan, iaitu kedudukan relatif.

Nilai lalai kedudukan adalah statik (iaitu, untuk mana-mana elemen, jika atribut kedudukannya tidak ditentukan, maka kedudukannya:statik)

Jika anda mahu div #sub dalam #demo ini diletakkan di suatu tempat di sudut kanan atas berbanding #demo, anda harus meletakkan #demo secara relatif dan #sub secara mutlak.

Mutlak diposisikan secara relatif kepada elemen induknya yang terdekat Jika anda tidak meletakkan #demo secara relatif, maka kedudukan mutlak #sub akan diposisikan secara relatif kepada badan.

relative diposisikan relatif kepada dirinya sendiri, contohnya: #demo{position:relative;top:-50px;}, kemudian #demo akan mengalihkan 50px berbanding kedudukan asalnya.

Satu lagi: relatif tidak terlepas daripada aliran dokumen, putus mutlak daripada aliran dokumen. Maksudnya: walaupun unsur relatif nampaknya telah menyimpang daripada kedudukan asalnya, ia sebenarnya kekal tidak berubah dalam aliran dokumen. Elemen mutlak bukan sahaja mengubah kedudukannya, tetapi juga memisahkan diri daripada aliran dokumen.

Apabila digunakan setiap hari, position:relative biasanya ditetapkan pada lapisan induk position:absolute; daripada lapisan induk. Jika tidak, position: absolute akan mencari sempadan elemen yang ditetapkan dengan position:relative layer demi layer sehingga elemen body..

Saya menulis contoh seperti berikut:

Kod html

statik: Nilai lalai. Tiada kedudukan khas, objek mengikut peraturan kedudukan HTML

Mutlak: Seret objek keluar daripada aliran dokumen dan gunakan kiri, kanan, atas, bawah dan atribut lain untuk melaksanakan kedudukan mutlak berbanding objek induk terdekatnya dengan tetapan kedudukan paling banyak.

Jika tiada objek induk seperti itu wujud, objek badan akan digunakan. Dan latanya ditakrifkan melalui atribut indeks-z

tetap: Tidak disokong. Kedudukan objek mengikut kaedah mutlak. Tetapi terdapat beberapa peraturan untuk dipatuhi

relatif: Objek tidak boleh disusun, tetapi akan diimbangi dalam aliran dokumen biasa mengikut atribut seperti kiri, kanan, atas, bawah dan sebagainya

" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>position</title> 
<style type="text/css"> 
  <!-- 
  body{ 
    font-size:12px; 
    margin:0 auto; 
  } 
  div#demo{ 
    position:relative; 
    border:1px solid #000; 
    margin:50px; 
    top:-50px; 
    line-height:18px; 
    overflow:hidden; 
    clear:both; 
    height:1%; 
  } 
  div#sub{ 
    position:absolute; 
    right:10px; 
    top:10px; 
  } 
  div.relative{ 
    position:relative; 
    left:400px; 
    top:-20px; 
  } 
  div.static,div.fixed,div.absolute,div.relative{ 
    width:300px;   
  } 
  div.static{ 
    background-color:#bbb; 
    position:static; 
  } 
  div.fixed{ 
    background-color:#ffc0cb; 
  } 
  div.absolute{ 
    background-color:#b0c4de; 
  } 
  div.relative{ 
    background-color:#ffe4e1; 
  } 
  --> 
</style> 
</head> 
<body> 
  <div id="demo"> 
    <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div> 
    <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div> 
    <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div> 
    <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div> 
  </div> 
</body> 
</html>

Salin selepas log masuk

Di atas adalah keseluruhan huraian penggunaan relatif atribut kedudukan yang dikongsi oleh editor saya harap anda menyukainya.