ความแตกต่างระหว่าง style =“ position: absolute” และ style =“ position: relative”

Question 1

มีใครบอกความแตกต่างระหว่างstyle = "position:absolute"และความstyle = "position:relative" แตกต่างได้หรือไม่ในกรณีที่ฉันเพิ่มลงในdiv/ span/ inputองค์ประกอบ

ฉันกำลังใช้งานabsoluteอยู่ แต่ฉันก็ต้องการสำรวจrelativeเช่นกัน สิ่งนี้จะเปลี่ยนตำแหน่งอย่างไร

Question 2

การวางตำแหน่งแบบสัมบูรณ์หมายความว่าองค์ประกอบถูกนำออกจากโฟลว์ปกติของเค้าโครงหน้าโดยสิ้นเชิง เท่าที่องค์ประกอบอื่น ๆ ในหน้าเกี่ยวข้ององค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนก็ไม่มีอยู่ จากนั้นองค์ประกอบจะถูกวาดแยกต่างหากโดยเรียงลำดับ "ด้านบน" ของสิ่งอื่น ๆ ที่ตำแหน่งที่คุณระบุโดยใช้left, right, top and bottomแอตทริบิวต์

เมื่อใช้ตำแหน่งที่คุณระบุด้วยแอตทริบิวต์เหล่านี้องค์ประกอบจะถูกวางไว้ที่ตำแหน่งนั้นภายในองค์ประกอบบรรพบุรุษสุดท้ายซึ่งมีแอตทริบิวต์ตำแหน่งของสิ่งอื่นนอกเหนือจากstatic(องค์ประกอบของหน้าเริ่มต้นเป็นแบบคงที่เมื่อไม่มีการระบุแอตทริบิวต์ตำแหน่ง) หรือเนื้อหาของเอกสาร (เบราว์เซอร์ viewport) หากไม่มีบรรพบุรุษดังกล่าว

ตัวอย่างเช่นถ้าฉันมีรหัสนี้:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div>จะอยู่ในตำแหน่ง 20px จากด้านบนของวิวพอร์ตของเบราว์เซอร์และ 20px จากขอบด้านซ้ายของสิ่งเดียวกัน

อย่างไรก็ตามหากฉันทำสิ่งนี้:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... แล้ว inner div จะถูกวางตำแหน่ง 20px จากด้านบนของouterdiv และ 20px จากขอบด้านซ้ายของเดียวกันเพราะouterdiv จะไม่ได้ตำแหน่งด้วยเพราะเราได้กำหนดอย่างชัดเจนไปใช้position:staticposition:relative

ในทางกลับกันการวางตำแหน่งสัมพัทธ์ก็เหมือนกับการระบุว่าไม่มีการวางตำแหน่งเลย แต่left, right, top and bottomแอตทริบิวต์ "เขยิบ" องค์ประกอบออกจากเค้าโครงปกติ องค์ประกอบที่เหลือในหน้ายังคงได้รับการจัดวางราวกับว่าองค์ประกอบนั้นอยู่ในจุดปกติ

ตัวอย่างเช่นถ้าฉันมีรหัสนี้:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... จากนั้นทั้งสาม<span>องค์ประกอบจะนั่งติดกันโดยไม่ทับซ้อนกัน

ถ้าฉันตั้งค่าวินาที<span>เพื่อใช้การวางตำแหน่งสัมพัทธ์เช่นนี้:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... จากนั้น Span2 จะทับซ้อนกันทางด้านขวาของ Span1 คูณ 5px Span1 และ Span3 จะอยู่ในตำแหน่งเดียวกันกับที่ทำในตัวอย่างแรกโดยเว้นช่องว่าง 5px ระหว่างด้านขวาของ Span2 และด้านซ้ายของ Span3

หวังว่าคงจะกระจ่างขึ้นสักหน่อย

Question 3

การวางตำแหน่งสัมพัทธ์:องค์ประกอบจะสร้างแกนพิกัดของตัวเองที่ตำแหน่งที่หักล้างจากแกนพิกัดของวิวพอร์ต เป็นส่วนหนึ่งของโฟลว์เอกสาร แต่ถูกเลื่อน

การวางตำแหน่งสัมบูรณ์:องค์ประกอบจะค้นหาแกนพิกัดที่ใกล้ที่สุดที่มีอยู่ระหว่างองค์ประกอบหลัก จากนั้นองค์ประกอบจะถูกวางตำแหน่งโดยการระบุออฟเซ็ตจากแกนพิกัดนี้ มันถูกลบออกจากโฟลว์ปกติของเอกสาร

ที่มา

Question 4

คุณจะต้องลองดูบทความการวางตำแหน่งนี้จาก 'A List Apart' ช่วยทำให้เข้าใจตำแหน่ง CSS (ซึ่งดูเหมือนจะบ้าสำหรับฉันก่อนบทความนี้)

Question 5

ด้วยการวางตำแหน่ง CSS คุณสามารถวางองค์ประกอบในตำแหน่งที่คุณต้องการบนหน้าของคุณได้

เมื่อคุณจะใช้การวางตำแหน่ง CSS สิ่งแรกที่คุณต้องทำคือใช้ตำแหน่งคุณสมบัติ CSS เพื่อบอกเบราว์เซอร์ว่าคุณจะใช้การวางตำแหน่งแบบสัมบูรณ์หรือแบบสัมพัทธ์

ทั้งสองตำแหน่งมีคุณสมบัติที่แตกต่างกัน ใน CSS เมื่อคุณกำหนดตำแหน่งแล้วคุณจะสามารถใช้แอตทริบิวต์บนขวาล่างซ้าย

ตำแหน่งแน่นอน

องค์ประกอบตำแหน่งสัมบูรณ์ถูกวางตำแหน่งโดยสัมพันธ์กับองค์ประกอบหลักแรกที่มีตำแหน่งอื่นที่ไม่ใช่แบบคงที่

ตำแหน่งสัมพัทธ์

องค์ประกอบตำแหน่งสัมพัทธ์อยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งปกติ

ในการวางตำแหน่งองค์ประกอบค่อนข้างตำแหน่งคุณสมบัติจะถูกกำหนดให้สัมพันธ์กัน ความแตกต่างระหว่างการวางตำแหน่งสัมบูรณ์และแบบสัมพัทธ์คือวิธีคำนวณตำแหน่ง

เพิ่มเติม: Postion Relative vs Absolute

Question 6

ตกลงคำตอบที่ชัดเจนมากที่นี่ ... โดยพื้นฐานแล้วตำแหน่งสัมพัทธ์นั้นสัมพันธ์กับองค์ประกอบหรือหน้าต่างก่อนหน้าในขณะที่สัมบูรณ์ไม่สนใจองค์ประกอบอื่น ๆ เว้นแต่จะเป็นผู้ปกครองหากคุณใช้ด้านบนและด้านซ้าย ...

ดูตัวอย่างที่ฉันสร้างขึ้นเพื่อให้คุณแสดงความแตกต่าง ...

นอกจากนี้คุณสามารถดูการทำงานได้โดยใช้ css ที่ฉันสร้างให้คุณคุณสามารถดูว่าตำแหน่งสัมบูรณ์และตำแหน่งสัมพัทธ์ทำงานอย่างไร:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

ขยายข้อมูลโค้ด

Question 7

การวางตำแหน่งแบบสัมบูรณ์จะขึ้นอยู่กับพิกัดของการแสดงผล:

position:absolute;
top:0px;
left:0px;

^ วางองค์ประกอบบนซ้ายของหน้าต่าง

ตำแหน่งสัมพัทธ์สัมพันธ์กับตำแหน่งที่วางองค์ประกอบ:

position:relative;
top:1px;
left:1px;

^ วางองค์ประกอบลง 1px และ 1px จากด้านซ้ายของตำแหน่งเดิม :)

Question 8

ญาติ:

องค์ประกอบที่มีposition: relative;อยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งปกติ
หากคุณไม่เพิ่มแอตทริบิวต์การกำหนดตำแหน่ง (บนซ้ายล่างหรือขวา) ในองค์ประกอบสัมพัทธ์จะไม่มีผลต่อการวางตำแหน่งเลย มันจะทำงานตรงตามposition: staticองค์ประกอบ
แต่ถ้าคุณเพิ่มแอตทริบิวต์การกำหนดตำแหน่งอื่น ๆ เช่น top: 10px; มันจะเลื่อนตำแหน่ง 10 พิกเซลลงจากที่ปกติจะเป็น
องค์ประกอบที่มีการวางตำแหน่งประเภทนี้จะได้รับผลกระทบจากองค์ประกอบอื่น ๆ และตัวมันเองก็ส่งผลกระทบต่อผู้อื่นด้วย

ค่าสัมบูรณ์:

องค์ประกอบที่มีposition: absolute;ช่วยให้คุณวางองค์ประกอบใดก็ได้ในตำแหน่งที่คุณต้องการ คุณใช้แอตทริบิวต์การกำหนดตำแหน่งด้านบนซ้ายล่าง และขวาเพื่อกำหนดตำแหน่ง
วางเทียบกับบรรพบุรุษที่ไม่คงที่ที่ใกล้ที่สุด หากไม่มีคอนเทนเนอร์ดังกล่าวจะวางโดยสัมพันธ์กับหน้านั้นเอง
จะถูกลบออกจากขั้นตอนปกติขององค์ประกอบบนหน้า
องค์ประกอบที่มีการวางตำแหน่งประเภทนี้จะไม่ได้รับผลกระทบจากองค์ประกอบอื่น ๆ และยังไม่มีผลต่อการไหลขององค์ประกอบอื่น ๆ

ดูตัวอย่างที่อธิบายตนเองนี้เพื่อความชัดเจนที่ดีขึ้น https://codepen.io/nyctophiliac/pen/BJMqjX

Question 9

Absolute วางวัตถุ (div, span ฯลฯ ) ไว้ที่ตำแหน่งบังคับสัมบูรณ์ (โดยปกติจะกำหนดเป็นพิกเซล) และสัมพัทธ์จะวางวัตถุจำนวนหนึ่งให้ห่างจากตำแหน่งที่ปกติจะเป็น ตัวอย่างเช่น:

ตำแหน่ง: ญาติ; ซ้าย: -20px;

อาจทำให้ด้านซ้ายของข้อความหายไปหากอยู่ห่างจากขอบด้านซ้ายของหน้าจอไม่เกิน 20px

Question 10

position: absolute สามารถวางไว้ที่ใดก็ได้และอยู่ที่นั่นเช่น 0,0

position: relative จะถูกวางโดยหักล้างจากตำแหน่งที่วางไว้ในเบราว์เซอร์

Question 11

ตำแหน่ง: การกระทำสัมพัทธ์เป็นตำแหน่งองค์ประกอบหลัก :กระทำลูกของตำแหน่งสัมพัทธ์ คุณสามารถดูตัวอย่างด้านล่าง

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }