Javascript memindahkan div ke atas dan ke bawah

Pemosisian memungkinkan kami menghasilkan hasil yang menarik dengan mengesampingkan aliran dokumen normal. Bagaimana jika Anda ingin sedikit mengubah posisi beberapa kotak dari posisi aliran standarnya untuk memberikan kesan yang sedikit aneh dan tertekan? . Atau bagaimana jika Anda ingin membuat elemen UI yang melayang di atas bagian lain halaman dan/atau selalu berada di tempat yang sama di dalam jendela browser tidak peduli seberapa banyak halaman di-scroll?

Ada sejumlah jenis pemosisian berbeda yang dapat Anda terapkan pada elemen HTML. Untuk mengaktifkan jenis pemosisian tertentu pada elemen, kami menggunakan properti

position: relative;

Pemosisian statis adalah default yang didapat setiap elemen. Itu hanya berarti "meletakkan elemen ke posisi normalnya dalam aliran dokumen — tidak ada yang istimewa untuk dilihat di sini. "

Untuk melihat ini (dan menyiapkan contoh Anda untuk bagian mendatang), pertama-tama tambahkan

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

<p class="positioned">…p>

Sekarang tambahkan aturan berikut ke bagian bawah CSS Anda

.positioned {
  position: static;
  background: yellow;
}

Jika Anda menyimpan dan menyegarkan, Anda tidak akan melihat perbedaan sama sekali, kecuali warna latar belakang yang diperbarui dari paragraf ke-2. Ini bagus — seperti yang kami katakan sebelumnya, pemosisian statis adalah perilaku default

Catatan. Anda dapat melihat contoh saat ini langsung di

top: 30px;
left: 30px;

Pemosisian relatif adalah jenis posisi pertama yang akan kita lihat. Ini sangat mirip dengan pemosisian statis, kecuali bahwa setelah elemen yang diposisikan mengambil tempatnya di aliran normal, Anda kemudian dapat memodifikasi posisi akhirnya, termasuk membuatnya tumpang tindih dengan elemen lain di halaman. Lanjutkan dan perbarui deklarasi

position: relative;

position: relative;

Jika Anda menyimpan dan menyegarkan pada tahap ini, Anda tidak akan melihat perubahan sama sekali pada hasilnya. Jadi, bagaimana Anda mengubah posisi elemen?

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

position: relative;

<h1>Relative positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  Inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

top: 30px;
left: 30px;

Catatan. Nilai dari properti ini dapat mengambil unit apa pun yang Anda harapkan secara wajar. piksel, mm, rem, %, dll

Jika sekarang Anda menyimpan dan menyegarkan, Anda akan mendapatkan hasil seperti ini

<h1>Relative positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  Inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Keren, ya? . Mengapa dipindahkan ke bawah dan ke kanan jika kita tentukan atas dan kiri? . Anda perlu memikirkannya seolah-olah ada kekuatan tak terlihat yang mendorong sisi yang ditentukan dari kotak yang diposisikan, memindahkannya ke arah yang berlawanan. Jadi, misalnya, jika Anda menetapkan

<h1>Relative positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  Inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

Catatan. Anda dapat melihat contoh saat ini langsung di

<h1>Relative positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  Inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

Pemosisian absolut membawa hasil yang sangat berbeda

Mari coba ubah deklarasi posisi dalam kode Anda sebagai berikut

position: absolute;

Jika sekarang Anda menyimpan dan menyegarkan, Anda akan melihat sesuatu seperti itu

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Pertama-tama, perhatikan bahwa celah di mana elemen yang diposisikan seharusnya berada dalam alur dokumen sudah tidak ada lagi — elemen pertama dan ketiga telah saling berdekatan seperti tidak ada lagi. Di satu sisi, ini benar. Elemen yang benar-benar diposisikan tidak lagi ada dalam aliran dokumen normal. Sebaliknya, ia berada di lapisannya sendiri yang terpisah dari yang lainnya. Ini sangat berguna. artinya kita dapat membuat fitur UI terisolasi yang tidak mengganggu tata letak elemen lain di halaman. Misalnya, kotak informasi popup, menu kontrol, panel rollover, fitur UI yang dapat diseret dan dilepas di mana saja di halaman, dan sebagainya

Kedua, perhatikan bahwa posisi elemen telah berubah. Ini karena

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

Catatan. Anda dapat menggunakan

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Catatan. Ya, margin masih memengaruhi elemen yang diposisikan. Namun, margin runtuh tidak

Catatan. Anda dapat melihat contoh saat ini langsung di

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Elemen mana yang merupakan "elemen yang mengandung" dari elemen yang benar-benar diposisikan?

Jika tidak ada elemen ancestor yang properti position-nya ditentukan secara eksplisit, maka secara default semua elemen ancestor akan memiliki posisi statis. Hasil dari ini adalah elemen yang benar-benar diposisikan akan dimuat di blok penampung awal. Blok penampung awal memiliki dimensi area pandang dan juga merupakan blok yang berisi elemen

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Elemen yang diposisikan bersarang di dalam

position: absolute;

position: absolute;

position: relative;

Ini harus memberikan hasil berikut

.positioned {
  position: static;
  background: yellow;
}

.positioned {
  position: static;
  background: yellow;
}

Elemen yang diposisikan sekarang berada relatif terhadap elemen

position: absolute;

Catatan. Anda dapat melihat contoh saat ini langsung di

position: absolute;

Semua pemosisian absolut ini menyenangkan, tetapi ada fitur lain yang belum kami pertimbangkan. Ketika elemen mulai tumpang tindih, apa yang menentukan elemen mana yang muncul di atas yang lain dan elemen mana yang muncul di bawah yang lain? . Bagaimana bila kita memiliki lebih dari satu?

Coba tambahkan berikut ini ke CSS Anda untuk membuat paragraf pertama benar-benar diposisikan juga

.positioned {
  position: static;
  background: yellow;
}

Pada titik ini Anda akan melihat paragraf pertama berwarna kapur, dipindahkan dari alur dokumen, dan diposisikan sedikit di atas dari tempat aslinya. Itu juga ditumpuk di bawah paragraf

<h1>Relative positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  Inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

<h1>Relative positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  Inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

Bisakah Anda mengubah urutan susun? . "z-index" adalah referensi ke sumbu z. Anda mungkin ingat dari poin sebelumnya dalam kursus di mana kita membahas halaman web menggunakan koordinat horizontal (sumbu x) dan vertikal (sumbu y) untuk menyusun posisi untuk hal-hal seperti gambar latar belakang dan offset drop shadow. Untuk bahasa yang berjalan dari kiri ke kanan, (0,0) ada di kiri atas halaman (atau elemen), dan sumbu x dan y melintang ke kanan dan ke bawah halaman

Halaman web juga memiliki sumbu z. garis imajiner yang membentang dari permukaan layar Anda ke arah wajah Anda (atau apa pun yang ingin Anda miliki di depan layar).

position: absolute;

position: absolute;

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

Untuk mengubah susunan susun, coba tambahkan deklarasi berikut ke aturan

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

.positioned {
  position: static;
  background: yellow;
}

Anda sekarang akan melihat paragraf kapur di atas

.positioned {
  position: static;
  background: yellow;
}

.positioned {
  position: static;
  background: yellow;
}

Perhatikan bahwa

position: absolute;

Catatan. Anda dapat melihat contohnya langsung di

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

Sekarang mari kita lihat penentuan posisi tetap. Ini bekerja dengan cara yang persis sama seperti pemosisian absolut, dengan satu perbedaan utama. sedangkan pemosisian absolut memperbaiki elemen di tempat relatif terhadap leluhur terdekatnya (blok penampung awal jika tidak ada), pemosisian tetap biasanya memperbaiki elemen di tempat relatif terhadap bagian yang terlihat dari viewport. (Pengecualian untuk ini terjadi jika salah satu leluhur elemen adalah blok berisi tetap karena properti transformasinya memiliki nilai selain tidak ada. ) Ini berarti Anda dapat membuat item UI berguna yang tetap di tempatnya, seperti menu navigasi persisten yang selalu terlihat tidak peduli seberapa banyak halaman digulir

Mari kita kumpulkan contoh sederhana untuk menunjukkan apa yang kita maksud. Pertama-tama, hapus aturan

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

<h1>Relative positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  Inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

Sekarang perbarui aturan

position: absolute;

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

.positioned {
  position: static;
  background: yellow;
}

Sekarang kita akan memberikan elemen

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

<h1>Absolute positioningh1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
p>

<p>
  inline elements <span>like this onespan> and <span>this onespan> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing textspan>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
p>

.positioned {
  position: static;
  background: yellow;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Jika Anda menyimpan dan menyegarkan, Anda akan melihat efek kecil yang menyenangkan dari tajuk yang tetap diperbaiki — konten tampak bergulir ke atas dan menghilang di bawahnya. Namun perhatikan bagaimana beberapa konten awalnya terpotong di bawah judul. Hal ini karena tajuk yang diposisikan tidak lagi muncul di alur dokumen, sehingga konten lainnya berpindah ke atas. Kita dapat memperbaikinya dengan memindahkan paragraf sedikit ke bawah. Kita dapat melakukan ini dengan mengatur beberapa margin atas pada paragraf pertama. Tambahkan ini sekarang

.positioned {
  position: static;
  background: yellow;
}

Anda sekarang akan melihat contoh yang sudah selesai

.positioned {
  position: static;
  background: yellow;
}

position: relative;

Catatan. Anda dapat melihat contohnya langsung di

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Ada nilai posisi lain yang tersedia yang disebut

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Pemosisian lengket dapat digunakan, misalnya, untuk membuat bilah navigasi menggulir halaman hingga titik tertentu, lalu menempel di bagian atas halaman.

position: relative;

position: relative;

position: relative;

Penggunaan

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

position: relative;

CSS mungkin terlihat sebagai berikut. Dalam aliran normal, elemen

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

top: 30px;
left: 30px;

position: relative;

.positioned {
  position: static;
  background: yellow;
}

position: relative;

Elemen lengket bersifat "lengket" relatif terhadap leluhur terdekat dengan "mekanisme pengguliran", yang ditentukan oleh properti posisi leluhurnya

Catatan. Anda dapat melihat contoh ini langsung di

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Anda telah mencapai bagian akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? . Penentuan posisi

Saya yakin Anda bersenang-senang bermain dengan posisi dasar. Meskipun ini bukan metode yang ideal untuk digunakan di seluruh tata letak, ada banyak tujuan spesifik yang cocok untuknya

Bagaimana cara memindahkan div ke atas dan ke bawah?

Bagaimana cara memindahkan div dalam JavaScript?

Bagaimana cara mengatur posisi div di JavaScript?

Bagaimana cara memindahkan div ke kanan dalam JavaScript?