問下這3個代碼是怎樣實現各自的效果的？另外為什么盒4初始位置默認比盒3右移2px
如圖所示，這三個
慕慕1721642
2018-04-24
4 回答
舉報
0/150
提交
取消
2018-04-25
我詳細看了下原代碼，這章主要講的的是相對定位，box3是box4的父元素，所以box4是以box3為參照物進行定位的。
第一種情況，相對定位主要以top、bottom、left、right來進行偏移，在不寫的情況下，其值默認為auto，瀏覽器會按照自己的規則對其進行定位；
第二種情況，你加上了top：100%，這就代表box4頂部偏移box3的高度，而box3的高度就是圖片的高度，所以會顯示緊貼著圖片的效果；
第三種情況，bottom:0;，這就代表box4底部偏移0，box4是box3的子元素，box3的底部就是box4的底部，而相對定位的元素是浮在上面的，所以會顯示文字在圖片上面的效果；
2022-03-23
了解了，謝謝。在代碼左邊數就是行號。
2018-04-25
至于為什么box4初始位置默認比box3右移2px，
你沒發現最上面有個樣式嗎?
div{border:2px red solid;}
哈哈哈^_^
2018-04-24
圖1效果圖中，盒3盒4中間有白色空隙；圖2效果圖中，盒3盒4中間沒有白色空隙。造成這種區別的原因是什么？如果不對top或bottom定義時，默認值是什么？