Hướng dẫn what is sticky position in css? - vị trí dính trong css là gì?

Question

Thuộc tính

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 CSS đặt cách một phần tử được định vị trong tài liệu. Các thuộc tính

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4, and

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 properties determine the final location of positioned elements.

Nội dung chính Show

Sự mô tả
Các loại định vị
Mối quan tâm tiếp cận
Hiệu suất & Khả năng tiếp cận
Định nghĩa chính thức
Cú pháp chính thức
Định vị tương đối
Định vị tuyệt đối
Các yếu tố tương đối được định vị vẫn còn trong luồng thông thường của tài liệu. Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy; Do đó, các yếu tố khác được định vị như thể nó không tồn tại. Yếu tố định vị hoàn toàn được định vị so với tổ tiên có vị trí gần nhất (tức là, tổ tiên gần nhất không phải là position = static | relative | absolute | sticky | fixed | running( ) 6). Nếu tổ tiên có vị trí không tồn tại, nó được định vị so với ICB (khối chứa ban đầu - xem thêm định nghĩa W3C), là khối chứa của phần tử gốc của tài liệu.
Các yếu tố tương đối được định vị vẫn còn trong luồng thông thường của tài liệu. Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy; Do đó, các yếu tố khác được định vị như thể nó không tồn tại. Yếu tố định vị hoàn toàn được định vị so với tổ tiên có vị trí gần nhất (tức là, tổ tiên gần nhất không phải là position = static | relative | absolute | sticky | fixed | running( ) 6). Nếu tổ tiên có vị trí không tồn tại, nó được định vị so với ICB (khối chứa ban đầu - xem thêm định nghĩa W3C), là khối chứa của phần tử gốc của tài liệu.
Các yếu tố tương đối được định vị vẫn còn trong luồng thông thường của tài liệu. Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy; Do đó, các yếu tố khác được định vị như thể nó không tồn tại. Yếu tố định vị hoàn toàn được định vị so với tổ tiên có vị trí gần nhất (tức là, tổ tiên gần nhất không phải là position = static | relative | absolute | sticky | fixed | running( ) 6). Nếu tổ tiên có vị trí không tồn tại, nó được định vị so với ICB (khối chứa ban đầu - xem thêm định nghĩa W3C), là khối chứa của phần tử gốc của tài liệu.
Tính tương thích của trình duyệt web
Sự khác biệt giữa cố định và dính là gì?
Phần dính là gì?
Làm cách nào để làm cho nội dung dính trong CSS?
Tôi nên sử dụng cố định hay dính?

Thử nó

Cú pháp

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Giá trị

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

6

Phần tử được định vị theo luồng thông thường của tài liệu. Các thuộc tính

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 và

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

1 không có hiệu lực. Đây là giá trị mặc định.

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

2

Phần tử được định vị theo luồng thông thường của tài liệu, và sau đó bù so với chính nó dựa trên các giá trị của

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5. Phần bù không ảnh hưởng đến vị trí của bất kỳ yếu tố nào khác; Do đó, không gian được đưa ra cho phần tử trong bố cục trang giống như vị trí là

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

6.

Giá trị này tạo ra một bối cảnh xếp chồng mới khi giá trị của

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

1 không phải là

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

9. Tác dụng của nó đối với

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

0,

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

1,

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

2,

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

3 và

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

4 là không xác định.

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

5

Phần tử được xóa khỏi luồng tài liệu thông thường và không có khoảng trống nào được tạo cho phần tử trong bố cục trang. Nó được định vị so với tổ tiên có vị trí gần nhất của nó, nếu có; Nếu không, nó được đặt so với khối chứa ban đầu. Vị trí cuối cùng của nó được xác định bởi các giá trị của

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5.

Giá trị này tạo ra một bối cảnh xếp chồng mới khi giá trị của

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

1 không phải là

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

9. Các lề của các hộp hoàn toàn có vị trí không sụp đổ với các lề khác.

<h2>Absolute positioningh2>

<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" />
p>

2

Phần tử được xóa khỏi luồng tài liệu thông thường và không có khoảng trống nào được tạo cho phần tử trong bố cục trang. Được định vị so với khối chứa ban đầu được thiết lập bởi chế độ xem, ngoại trừ khi một trong các tổ tiên của nó có thuộc tính

<h2>Absolute positioningh2>

<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" />
p>

3,

<h2>Absolute positioningh2>

<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" />
p>

4 hoặc

<h2>Absolute positioningh2>

<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" />
p>

5 được đặt thành một cái gì đó khác với

<h2>Absolute positioningh2>

<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" />
p>

6 (xem CSS biến đổi đặc điểm) hoặc thuộc tính

<h2>Absolute positioningh2>

<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" />
p>

7 được đặt thành

<h2>Absolute positioningh2>

<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" />
p>

3, trong trường hợp tổ tiên hành xử như khối chứa. .

Giá trị này luôn tạo ra một bối cảnh xếp chồng mới. Trong các tài liệu in, phần tử được đặt ở cùng một vị trí trên mỗi trang.

* {
  box-sizing: border-box;
}

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;
}

5

Phần tử được định vị theo luồng thông thường của tài liệu, sau đó bù so với tổ tiên cuộn gần nhất và khối chứa (tổ tiên cấp khối gần nhất), bao gồm các phần tử liên quan đến bảng, dựa trên các giá trị của

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4, và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5. Phần bù không ảnh hưởng đến vị trí của bất kỳ yếu tố nào khác.

Giá trị này luôn tạo ra một bối cảnh xếp chồng mới. Lưu ý rằng một yếu tố dính "dính" vào tổ tiên gần nhất có "cơ chế cuộn" (được tạo ra khi

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <div class="box" id="one">Onediv>
div>

0 là

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <div class="box" id="one">Onediv>
div>

1,

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <div class="box" id="one">Onediv>
div>

2,

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

9 hoặc

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <div class="box" id="one">Onediv>
div>

4), ngay cả khi tổ tiên đó không phải là tổ tiên thực sự gần nhất.

Sự mô tả

Các loại định vị

Một phần tử định vị là một phần tử có giá trị

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 được tính toán là

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

2,

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

5,

<h2>Absolute positioningh2>

<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" />
p>

2 hoặc

* {
  box-sizing: border-box;
}

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;
}

5. (Nói cách khác, đó là bất cứ điều gì ngoại trừ

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

6.)positioned element is an element whose computed

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 value is either

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

2,

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

5,

<h2>Absolute positioningh2>

<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" />
p>

2, or

* {
  box-sizing: border-box;
}

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;
}

5. (In other words, it's anything except

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

6.)

Một phần tử tương đối có vị trí là một phần tử có giá trị

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 được tính toán là

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

2. Các thuộc tính

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 chỉ định độ lệch dọc từ vị trí bình thường của nó; Các thuộc tính

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3 chỉ định độ lệch ngang.relatively positioned element is an element whose computed

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 value is

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

2. The

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2 and

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 properties specify the vertical offset from its normal position; the

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 and

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3 properties specify the horizontal offset.

Một phần tử được định vị hoàn toàn là một yếu tố có giá trị

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 được tính toán là

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

5 hoặc

<h2>Absolute positioningh2>

<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" />
p>

2. Các thuộc tính

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 xác định độ lệch từ các cạnh của khối chứa phần tử. (Khối chứa là tổ tiên so với phần tử được định vị.) Nếu phần tử có tỷ suất lợi nhuận, chúng được thêm vào phần bù. Phần tử thiết lập bối cảnh định dạng khối mới (BFC) cho nội dung của nó.absolutely positioned element is an element whose computed

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 value is

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

5 or

<h2>Absolute positioningh2>

<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" />
p>

2. The

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4, and

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents.

Một phần tử định vị dính là một phần tử có giá trị

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 được tính toán là

* {
  box-sizing: border-box;
}

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;
}

5. Nó được coi là vị trí tương đối cho đến khi khối chứa của nó vượt qua một ngưỡng được chỉ định (chẳng hạn như cài đặt

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2 thành giá trị khác ngoài tự động) trong root dòng chảy của nó cạnh đối diện của khối chứa của nó.stickily positioned element is an element whose computed

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

1 value is

* {
  box-sizing: border-box;
}

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;
}

5. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2 to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

Hầu hết thời gian, các yếu tố được định vị hoàn toàn có

#one {
  position: sticky;
  top: 10px;
}

7 và

#one {
  position: sticky;
  top: 10px;
}

8 được đặt thành

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

9 có kích thước để phù hợp với nội dung của chúng. Tuy nhiên, các phần tử không được đặt lại, hoàn toàn có thể được thực hiện để lấp đầy không gian dọc có sẵn bằng cách chỉ định cả

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 và khiến

#one {
  position: sticky;
  top: 10px;
}

7 không được xác định (nghĩa là

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

9). Chúng cũng có thể được thực hiện để lấp đầy không gian ngang có sẵn bằng cách chỉ định cả

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3 và để lại

#one {
  position: sticky;
  top: 10px;
}

8 là

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

9.

Ngoại trừ trường hợp vừa được mô tả (của các yếu tố hoàn toàn có vị trí lấp đầy không gian có sẵn):

Nếu cả

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

4 được chỉ định (về mặt kỹ thuật, không phải

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

9),

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

2 sẽ thắng.

Nếu cả

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3 được chỉ định,

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

5 sẽ thắng khi

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

05 là

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

06 (tiếng Anh, tiếng Nhật ngang, v.v.) và

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

3 thắng khi

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

05 là

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

09 (tiếng Ba Tư, tiếng Ả Rập, tiếng Do Thái, v.v.).

Mối quan tâm tiếp cận

Đảm bảo rằng các phần tử được định vị với giá trị

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

5 hoặc

<h2>Absolute positioningh2>

<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" />
p>

2 không che khuất nội dung khác khi trang được phóng to để tăng kích thước văn bản.

MDN Hiểu WCAG, Hướng dẫn 1.4 Giải thích
Trình bày trực quan: Hiểu SC 1.4.8 | Hiểu WCAG 2.0

Hiệu suất & Khả năng tiếp cận

Các yếu tố cuộn chứa nội dung

<h2>Absolute positioningh2>

<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" />
p>

2 hoặc

* {
  box-sizing: border-box;
}

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;
}

5 có thể gây ra các vấn đề về hiệu suất và khả năng tiếp cận. Khi người dùng cuộn, trình duyệt phải sơn lại nội dung dính hoặc cố định ở một vị trí mới. Tùy thuộc vào nội dung cần được sơn lại, hiệu suất của trình duyệt và tốc độ xử lý của thiết bị, trình duyệt có thể không thể quản lý các lần lặp ở 60 khung hình / giây, gây ra mối lo ngại về khả năng tiếp cận đối với những người có độ nhạy và jank cho mọi người. Một giải pháp là thêm

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

14 vào các phần tử được định vị để hiển thị phần tử trong lớp riêng của nó, cải thiện tốc độ sơn lại và do đó cải thiện hiệu suất và khả năng tiếp cận.

Định nghĩa chính thức

Cú pháp chính thức

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

Ví dụ

Định vị tương đối

Các phần tử tương đối được định vị được bù một lượng nhất định từ vị trí bình thường của chúng trong tài liệu, nhưng không có phần bù ảnh hưởng đến các yếu tố khác. Trong ví dụ dưới đây, lưu ý cách các yếu tố khác được đặt như thể "hai" chiếm không gian của vị trí bình thường.

HTML

<div class="box" id="one">Onediv>
<div class="box" id="two">Twodiv>
<div class="box" id="three">Threediv>
<div class="box" id="four">Fourdiv>

CSS

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

Định vị tuyệt đối

Các yếu tố tương đối được định vị vẫn còn trong luồng thông thường của tài liệu. Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy; Do đó, các yếu tố khác được định vị như thể nó không tồn tại. Yếu tố định vị hoàn toàn được định vị so với tổ tiên có vị trí gần nhất (tức là, tổ tiên gần nhất không phải là

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

6). Nếu tổ tiên có vị trí không tồn tại, nó được định vị so với ICB (khối chứa ban đầu - xem thêm định nghĩa W3C), là khối chứa của phần tử gốc của tài liệu.

HTML

<h2>Absolute positioningh2>

<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" />
p>

CSS

* {
  box-sizing: border-box;
}

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;
}

Định vị tuyệt đối

Các yếu tố tương đối được định vị vẫn còn trong luồng thông thường của tài liệu. Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy; Do đó, các yếu tố khác được định vị như thể nó không tồn tại. Yếu tố định vị hoàn toàn được định vị so với tổ tiên có vị trí gần nhất (tức là, tổ tiên gần nhất không phải là position = static | relative | absolute | sticky | fixed | running( ) 6). Nếu tổ tiên có vị trí không tồn tại, nó được định vị so với ICB (khối chứa ban đầu - xem thêm định nghĩa W3C), là khối chứa của phần tử gốc của tài liệu.

Kết quả

HTML

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  p>
  <div class="box" id="one">Onediv>
div>

CSS

* {
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

Định vị tuyệt đối

Các yếu tố tương đối được định vị vẫn còn trong luồng thông thường của tài liệu. Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy; Do đó, các yếu tố khác được định vị như thể nó không tồn tại. Yếu tố định vị hoàn toàn được định vị so với tổ tiên có vị trí gần nhất (tức là, tổ tiên gần nhất không phải là position = static | relative | absolute | sticky | fixed | running( ) 6). Nếu tổ tiên có vị trí không tồn tại, nó được định vị so với ICB (khối chứa ban đầu - xem thêm định nghĩa W3C), là khối chứa của phần tử gốc của tài liệu.

Kết quả

#one {
  position: sticky;
  top: 10px;
}

Định vị cố định

Định vị cố định tương tự như định vị tuyệt đối, ngoại trừ khối chứa phần tử là khối chứa ban đầu được thiết lập bởi chế độ xem, trừ khi bất kỳ tổ tiên nào có thuộc tính

<h2>Absolute positioningh2>

<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" />
p>

3,

<h2>Absolute positioningh2>

<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" />
p>

4 hoặc

<h2>Absolute positioningh2>

<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" />
p>

5 được đặt thành một thứ khác ngoài

<h2>Absolute positioningh2>

<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" />
p>

6 (xem CSS biến đổi thông số kỹ thuật), sau đó khiến tổ tiên đó thay thế các yếu tố chứa khối. Điều này có thể được sử dụng để tạo ra một phần tử "nổi" ở cùng một vị trí bất kể cuộn. Trong ví dụ dưới đây, hộp "Một" được cố định ở 80 pixel từ đầu trang và 10 pixel từ bên trái. Ngay cả sau khi cuộn, nó vẫn ở cùng một nơi so với chế độ xem. Ngoài ra, khi thuộc tính

<h2>Absolute positioningh2>

<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" />
p>

7 được đặt thành

<h2>Absolute positioningh2>

<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" />
p>

3, một khối chứa mới được thiết lập.

Định vị dính

HTML

<dl>
  <div>
    <dt>Adt>
    <dd>Andrew W.K.dd>
    <dd>Apparatdd>
    <dd>Arcade Firedd>
    <dd>At The Drive-Indd>
    <dd>Aziz Ansaridd>
  div>
  <div>
    <dt>Cdt>
    <dd>Chromeodd>
    <dd>Commondd>
    <dd>Convergedd>
    <dd>Crystal Castlesdd>
    <dd>Cursivedd>
  div>
  <div>
    <dt>Edt>
    <dd>Explosions In The Skydd>
  div>
  <div>
    <dt>Tdt>
    <dd>Ted Leo & The Pharmacistsdd>
    <dd>T-Paindd>
    <dd>Thricedd>
    <dd>TV On The Radiodd>
    <dd>Two Gallantsdd>
  div>
dl>

CSS

position = 
  static      |
  relative    |
  absolute    |
  sticky      |
  fixed       |
  running( )

0

Định vị tuyệt đối

Các yếu tố tương đối được định vị vẫn còn trong luồng thông thường của tài liệu. Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy; Do đó, các yếu tố khác được định vị như thể nó không tồn tại. Yếu tố định vị hoàn toàn được định vị so với tổ tiên có vị trí gần nhất (tức là, tổ tiên gần nhất không phải là position = static | relative | absolute | sticky | fixed | running( ) 6). Nếu tổ tiên có vị trí không tồn tại, nó được định vị so với ICB (khối chứa ban đầu - xem thêm định nghĩa W3C), là khối chứa của phần tử gốc của tài liệu.

Kết quả
Định vị cố định # position-property

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Sự khác biệt giữa cố định và dính là gì?

Phần tử có vị trí: Thuộc tính cố định được cố định vào chế độ xem và không di chuyển bất kể việc cuộn.Euity có vị trí: Thuộc tính dính có thể cuộn đến giá trị bù do người dùng cung cấp.2.fixed property is fixed to the viewport and doesn't move irrespective of scrolling. Element with position: sticky property can scroll to an offset value provided by the user. 2.

Phần dính là gì?

Hiệu ứng cuộn dính cho phép bạn đặt một phần/tiện ích làm dính, để nó dính vào trên cùng hoặc dưới cùng của màn hình.lets you set a Section/Widget as sticky, so that it sticks to the top or bottom of the screen.

Làm cách nào để làm cho nội dung dính trong CSS?

Để làm cho một yếu tố dính, làm: make_sticky ('#sticky-elem-id');Khi phần tử trở nên dính, mã quản lý vị trí của nội dung còn lại để giữ cho nó không nhảy vào khoảng trống do phần tử dính.make_sticky('#sticky-elem-id'); When the element becomes sticky, the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element.

Tôi nên sử dụng cố định hay dính?

Nó phụ thuộc, khi bạn muốn phần tử đó chỉ đơn giản là không di chuyển trong trang web của bạn sau đó sử dụng cố định.Nhưng hãy cẩn thận với vị trí: Đã sửa, nó có khả năng bao gồm các yếu tố khác.Khi bạn muốn phần tử đó cuộn vào chế độ xem và sau đó dừng lại ở một điểm nhất định, hãy sử dụng dính.when you want that element simply doesnt move in your website then use fixed . But be careful with position: fixed , it can potentially cover other element. When you want that element scrolling into view and then stop at certain point, use sticky .

programming css CSS position CSS position: relative position: absolute css CSS position: fixed Position: sticky Position relative

Hướng dẫn what is sticky position in css? - vị trí dính trong css là gì?

Thử nó

Cú pháp

Giá trị

Sự mô tả

Các loại định vị

Mối quan tâm tiếp cận

Hiệu suất & Khả năng tiếp cận

Định nghĩa chính thức

Cú pháp chính thức

Ví dụ

Định vị tương đối

HTML

CSS

Định vị tuyệt đối

HTML

CSS

Định vị tuyệt đối

HTML

CSS

Định vị tuyệt đối

HTML

CSS

Định vị tuyệt đối

Tính tương thích của trình duyệt web

Xem thêm

Sự khác biệt giữa cố định và dính là gì?

Phần dính là gì?

Làm cách nào để làm cho nội dung dính trong CSS?

Tôi nên sử dụng cố định hay dính?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội