Betulkan kedudukan lapisan dengan menetapkan atribut kedudukan dalam petua CSS_javascript

Definisi dan penggunaan

Atribut kedudukan menentukan jenis kedudukan elemen.

Penerangan

Atribut ini mentakrifkan mekanisme kedudukan yang digunakan untuk mewujudkan reka letak elemen. Mana-mana elemen boleh diletakkan, tetapi elemen mutlak atau tetap menjana kotak peringkat blok, tanpa mengira jenis elemen itu sendiri. Elemen yang agak kedudukannya diimbangi daripada kedudukan lalainya dalam aliran biasa.

默认值：	static
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

Contoh

Letakkan elemen h2:

h2
 {
 position:absolute;
 left:100px;
 top:150px;
 }
TIY

Sokongan penyemak imbas

Semua pelayar utama menyokong atribut kedudukan.

Nota: Nilai atribut "warisan" tidak disokong dalam mana-mana versi Internet Explorer (termasuk IE8).

Nilai yang mungkin

Contoh TIY

nilai

Penerangan

mutlak

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

Menghasilkan elemen berkedudukan mutlak, diposisikan relatif kepada elemen induk pertama selain daripada kedudukan statik.

Kedudukan elemen

ditentukan melalui atribut "kiri", "atas", "kanan" dan "bawah".

tetap

Janakan elemen berkedudukan mutlak, diposisikan berbanding tetingkap penyemak imbas. Kedudukan elemen ditentukan melalui atribut "kiri", "atas", "kanan" dan "bawah".

saudara

Menghasilkan elemen yang agak berkedudukan, berkedudukan berbanding kedudukan normalnya.

Jadi "kiri:20" menambah 20 piksel pada kedudukan KIRI elemen.

statik

Nilai lalai. Tanpa kedudukan, elemen muncul dalam aliran biasa (mengabaikan pengisytiharan atas, bawah, kiri, kanan atau indeks z).

warisi

menyatakan bahawa nilai atribut kedudukan harus diwarisi daripada elemen induk.

Kedudukan: Kedudukan relatif Contoh ini menunjukkan cara meletakkan elemen berbanding kedudukan normalnya. Kedudukan: Kedudukan Mutlak Contoh ini menunjukkan cara meletakkan elemen menggunakan nilai mutlak. Kedudukan: Kedudukan Tetap Contoh ini menunjukkan cara meletakkan elemen berbanding tetingkap penyemak imbas. Menetapkan Bentuk Unsur Contoh ini menunjukkan cara menetapkan bentuk unsur. Elemen dipotong ke dalam bentuk dan dipaparkan. Z-indexZ-index boleh digunakan untuk meletakkan satu elemen di belakang elemen lain. Indeks Z Unsur dalam contoh di atas telah diubah indeks Znya.

Izinkan saya memperkenalkan kepada anda atribut Position dalam CSS

Kedudukan CSS sangat penting dan mempunyai nilai berikut: statik, relatif, mutlak, tetap.

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>

Statik: kedudukan statik. Jika anda tidak menetapkan atribut kedudukan, lalai adalah statik. Atribut seperti atas, kiri, bawah dan kanan tidak sah apabila statik Untuk menggunakan atribut ini, kedudukan mesti ditetapkan kepada salah satu daripada tiga nilai yang lain.

Relatif: Kedudukan relatif. Elemen akan menyesuaikan dengan kedudukannya semasa ia diletakkan secara statik Ruang yang diperuntukkan kepada elemen dalam kedudukan statik masih akan diperuntukkan kepadanya. tetapi mereka juga tidak akan berganjak dari kedudukan baru unsur itu. Mutlak: Kedudukan mutlak. Elemen akan diposisikan secara relatif kepada elemen yang mengandungi Contohnya, jika ia bersarang dalam elemen lain yang diposisikan secara mutlak, ia akan diposisikan secara relatif kepada elemen tersebut. Tetap: Kedudukan tetap. Elemen akan ditetapkan pada kedudukan tetap pada penyemak imbas dan tidak akan menatal dengan elemen lain. Secara kiasan, apabila bar skrol ditarik ke atas atau ke bawah, kedudukan elemen tetap pada skrin tidak berubah. Perlu diingatkan bahawa IE6 tidak menyokong atribut ini. Nota: Banyak halaman web dipusatkan Dengan cara ini, apabila elemen diletakkan secara mutlak, akan terdapat penyelewengan dalam paparan pada resolusi yang berbeza, kita boleh mengendalikannya melalui kaedah yang serupa dengan yang berikut: