Css文本在圖像上的相對定位

Question

我正在學習CSS並查看此示例：

https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center

我不明白為什么當我刪除父div的“position：relative”時，它會影響里面的文本。

據我所知，位置相對使得你應用它的html元素相對於它的原始位置。 但是在這里他們沒有設置任何屬性，除了位置相對，所以為什么需要？

Answer 1

因為， center div的位置是absolute ， left: 0和top: 50%整個屏幕的top: 50% ， 除非你把它放在有相對位置的父級內 ，它就變成left: 0和top: 50%父母的top: 50%

Answer 2

.container div是.center div的第一個父級 ，第二個父級是body標簽，然后是html標簽。 具有相對位置的標記將成為具有絕對位置的.center div的父級 。

Answer 3

相對位置將根據其父元素讓文本位置。 在這種情況下，為了相對於父div或元素定位它，它是圖像。 你需要它相對於那個css標簽位置相對定位，值為相對值。