Css tuyệt đối bên ngoài cha mẹ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Giá trị này tạo ngữ 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>

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

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

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

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

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

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

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

Phần tử bị 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 gần nhất của nó, nếu có; . 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( )  

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

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

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

Giá trị này tạo ngữ 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>

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

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

Phần tử bị 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ị tương đối so với khối chứa ban đầu được thiết lập bởi khung nhìn, ngoại trừ khi một trong các tổ tiên của nó có thuộc tính

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

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

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

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

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

Giá trị này luôn tạo 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;
}

Phần tử được định vị theo quy trình bình thường của tài liệu, sau đó bù tương ứng với tổ tiên cuộn gần nhất của nó 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( )  

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

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

Giá trị này luôn tạo bối cảnh xếp chồng mới. Lưu ý rằng phần tử dính "dính" vào tổ tiên gần nhất của nó có "cơ chế cuộn" (được tạo 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>

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

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

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

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

• Phần tử được định vị là 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,

  <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" />
  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. )
• Phần tử được định vị tương đối là 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 phần bù dọc từ vị trí bình thường của nó;
• Một phần tử được định vị tuyệt đối 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;
  }
  
  .box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    color: white;
  }
  
  #two {
    position: relative;
    top: 20px;
    left: 20px;
    background: blue;
  }
  

  5 hoặc

  <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" />
  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 chỉ đị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 liên quan đến phần tử được định vị. ) Nếu phần tử có lề, chúng sẽ đượ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ó
• Phần tử được định vị dính là 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 nó vượt qua một ngưỡng đã chỉ định (chẳng hạn như đặt

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

  2 thành giá trị khác với tự động) trong gốc luồng của nó (hoặc vùng chứa mà nó cuộn bên trong), tại thời điểm đó, nó được coi là "bị kẹt" cho đến khi đáp ứng

Hầu hết thời gian, các yếu tố được định vị tuyệt đối có

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

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

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

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

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

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

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

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

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

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

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

Ngoại trừ trường hợp vừa được mô tả (của các phần tử được định vị tuyệt đối 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 đều đượ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), thì

  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 đều được chỉ định, thì

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

  5 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 bảo rằng các thành phần được định vị bằng 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;
}

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

• Trình bày trực quan. Hiểu SC 1. 4. số 8. Hiểu về WCAG 2. 0

Các phần tử cuộn chứa nội dung

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

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

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

Giá trị ban đầu_______0_______6Áp dụng cho tất cả các phần tửKế thừakhôngGiá trị tính toánnhư đã chỉ địnhKiểu hoạt ảnhrời rạcTạo bối cảnh xếp chồngcó

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

Các phần tử được định vị tương đối được bù một lượng nhất định so với 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 phần tử khác. Trong ví dụ dưới đây, lưu ý cách các phần tử khác được đặt như thể "Hai" đang chiếm không gian của vị trí bình thường của nó

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

Các yếu tố được định vị tương đối vẫn nằm trong luồng thông thường của tài liệu. Ngược lại, một phần tử được định vị tuyệt đối sẽ bị loại khỏi luồng; . Phần tử được định vị tuyệt đối được định vị tương ứng với tổ tiên được định vị gần nhất của nó (i. e. , tổ tiên gần nhất không phải là

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

HTML

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

Kết quả

Đị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 khung nhìn, trừ khi bất kỳ tổ tiên nào có thuộc tính

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

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

Kết quả

Định vị cố định có thể được coi là sự kết hợp giữa định vị tương đối và cố định khi tổ tiên cuộn gần nhất của nó là chế độ xem. Một phần tử được định vị dính được coi là được định vị tương đối cho đến khi nó vượt qua một ngưỡng xác định, tại thời điểm đó, nó được coi là cố định cho đến khi nó đạt đến ranh giới của phần tử cha của nó. Ví dụ

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

Quy tắc CSS ở trên sẽ định vị phần tử có id một cách tương đối cho đến khi chế độ xem được cuộn sao cho phần tử sẽ nhỏ hơn 10 pixel tính từ trên xuống. Vượt quá ngưỡng đó, phần tử sẽ được cố định thành 10 pixel tính từ trên xuống

Một cách sử dụng phổ biến cho định vị cố định là dành cho các tiêu đề trong danh sách được sắp xếp theo thứ tự bảng chữ cái. Tiêu đề "B" sẽ xuất hiện ngay bên dưới các mục bắt đầu bằng "A" cho đến khi chúng được cuộn ra khỏi màn hình. Thay vì trượt ra khỏi màn hình với phần còn lại của nội dung, tiêu đề "B" sau đó sẽ được cố định ở trên cùng của chế độ xem cho đến khi tất cả các mục "B" đã cuộn ra khỏi màn hình, tại thời điểm đó, nó sẽ bị che bởi chữ "C"

Bạn phải chỉ định một ngưỡng có ít nhất một trong số

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

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

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

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

Bạn có thể sử dụng Flex với tuyệt đối không?

Div có thể là tuyệt đối và tương đối không?

Tại sao chỉ số Z của tôi không hoạt động?